Filepicker? Télécharger de gros fichiers via HTML5 vers S3 sans backend

Question

Télécharger des fichiers avec multipart/form-data est simple et fonctionne bien la plupart du temps jusqu'à ce que vous ayez commencé à vous concentrer sur le téléchargement de gros fichiers. Si nous look closely ce qui se passe lors d'un téléchargement de fichier:

• client envoie une requête POST avec le contenu du fichier dans le corps

• serveur Web accepte la demande et initie le transfert de données (ou renvoie une erreur 413 si la taille du fichier est dépasser la limite)

• serveur web commence à remplir des tampons (dépend de la taille du fichier et des tampons), les stocker sur le disque et l'envoyer via la prise/réseau back-end

• back-end vérifie l'authentification (jetez un oeil, une fois le fichier téléchargé)

• back-end lit le fichier et réduit les quelques en-têtes Content-Disposition, Content-Type, stocke sur le disque à nouveau effectue des back-end tout ce que vous devez faire avec le fichier

pour éviter un tel surcoût nous fichier de vidage sur le disque (Nginx client_body_in_file_only) et de gérer le rappel à envoyer plus loin sur la ligne. Ensuite, l'agent de file d'attente sélectionne le fichier et fait ce qui est requis. Il fonctionne pour la communication inter-serveur assez lisse mais nous devons résoudre le problème similaire avec le téléchargement côté client.

Nous avons également une solution de téléchargement S3 côté client. Aucune interaction back-end ne se produit. Pour le téléchargement de vidéos, nous gérons la vidéo pour convertir au format h.264 Baseline/AAC avec Zencoder.

Actuellement, nous utilisons Flash uploader modifié basé sur s3-swf-upload-plugin avec la combinaison de Zencoder JS SDK qui est vraiment efficace, mais utilise Flash.

Question. Comment atteindre le même objectif avec l'uploader de fichiers HTML5? Est-ce que Filepicker.io and Zencoder résout le problème? Quelle est la méthode recommandée pour gérer le téléchargement de fichiers HTML5 sans interaction back-end?

Les exigences sont les suivantes:

• HTML5, pas flash
• télécharger la vidéo avec le post-traitement pour le rendre compatible avec les lecteurs HTML5 et mobiles
• pour télécharger des images post-traitement wtih (redimensionner, recadrer, faire pivoter)
• pour télécharger des documents tels que PDF avec une fonctionnalité de prévisualisation

Est-ce https://www.filepicker.com faire un bon travail?

Answer 1

Les exigences sont les suivantes:

HTML5, ne clignote pas

FilePicker prend désormais en charge un widget complet réactif qui est pur html et css.

télécharger la vidéo avec le post-traitement pour le rendre compatible avec les lecteurs HTML5 et mobiles

FilePicker offre maintenant la possibilité de transcoder la plupart des formats vidéo H264 & WebM pour la lecture mobile. https://www.filepicker.com/documentation/file_processing/video_conversion/video

pour télécharger des images wtih post-traitement (redimensionner, rogner, faites pivoter)

FilePicker offre ne Crop & tourner dans le nouveau widget, ainsi que Redimensionner, l'affûtage et watermarking via l'API.

pour télécharger des documents tels que PDF avec une fonctionnalité de prévisualisation

Nous vous offrons la possibilité de convertir de 19 formats de fichiers différents à de nombreux formats de sortie. https://www.filepicker.com/documentation/file_processing/document_conversion/document

Answer 2

Pour télécharger un gros fichiers à S3 il y a un REST API for Multipart Upload, qui fonctionne de la façon

1. suivant lancer un chargement
2. contenu de téléchargement de fichiers divisé en plusieurs demandes
3. terminer le téléchargement

l'API est également disponible pour appeler à partir de javascript et le fichier téléchargé peut être divisé en plusieurs demandes en utilisant File/Blob slice API

Le seul problème est que pour pouvoir s'authentifier auprès de S3 à partir de javascript, vous devez transmettre vos informations d'authentification. Ceci est généralement résolu par un intercalaire comme PHP, donc les détails d'authentification ne sont pas stockés dans des fichiers javascript.

question similaire sur le SO: HTML5 and Amazon S3 Multi-Part uploads

EDIT

• opérations d'image telles que le recadrage et le redimensionnement peut être fait par la toile. Chargez simplement l'image locale dans l'élément canvas, apportez les modifications dont vous avez besoin, puis générez le flux de données image jpeg/png à l'aide de la méthode canvas.toDataUrl.
• PDF aperçu est possible, il y a un PDF.js lib qui peut rendre le fichier PDF locale dans la toile
• AFAIK il n'y a aucun moyen de faire la conversion vidéo sur le côté client

Answer 3

J'utilise filepicker pour 2 ans maintenant, et sans doute ça vaut le prix. n'essayez pas de gérer le téléchargement de fichiers (à partir de google drive, d'ios, de mon appareil photo, de dropbox ...) Filepicker gère cela très bien et vous fournit une URL prête à l'emploi. Passez plus de temps à travailler sur votre cœur de métier, le téléchargement de fichiers est vraiment facile à déléguer