Как создать форму загрузки файла с помощью Express и Dropzone.js

Помимо настроек CSS, вы также можете настроить HTML, который составляет предварительный просмотр, установив previewTemplate конфигурации previewTemplate . Вот как выглядит шаблон предварительного просмотра по умолчанию:

 <div class="dz-preview dz-file-preview"> <div class="dz-image"> <img data-dz-thumbnail /> </div> <div class="dz-details"> <div class="dz-size"> <span data-dz-size></span> </div> <div class="dz-filename"> <span data-dz-name></span> </div> </div> <div class="dz-progress"> <span class="dz-upload" data-dz-uploadprogress></span> </div> <div class="dz-error-message"> <span data-dz-errormessage></span> </div> <div class="dz-success-mark"> <svg>REMOVED FOR BREVITY</svg> </div> <div class="dz-error-mark"> <svg>REMOVED FOR BREVITY</svg> </div> </div> 

Как видите, вы получаете полный контроль над тем, как файлы отображаются после того, как они были помещены в очередь для загрузки, а также состояниями успешных и неудачных попыток.

На этом мы завершаем раздел об использовании плагина DropzoneJS. В заключение давайте посмотрим, как заставить его работать с серверным кодом.

Простой обработчик загрузки на стороне сервера с Node.js и Express

Естественно, вы можете использовать любую серверную технологию для обработки загруженных файлов. Чтобы продемонстрировать, как интегрировать ваш сервер с плагином, мы создадим очень простой пример с использованием Node.js и Express.

Для обработки самого загруженного файла мы будем использовать multer , пакет, который предоставляет некоторое промежуточное программное обеспечение Express, которое делает его действительно простым. На самом деле это просто

 var upload = multer( { dest: 'uploads/' } ); app.post( '/upload', upload.single( 'file' ), function( req, res, next ) { // Metadata about the uploaded file can now be found in req.file }); 

Прежде чем мы продолжим реализацию, наиболее очевидный вопрос, который нужно задать при работе с плагином вроде DropzoneJS, который делает за вас запросы за кулисами: «Каких ответов он ожидает?»

Обработка загрузки успешно

Если процесс загрузки успешен, единственным требованием, касающимся кода на стороне сервера, является возврат кода ответа 2xx . Содержание и формат вашего ответа полностью зависит от вас, и, вероятно, будет зависеть от того, как вы его используете; Например, вы можете вернуть объект JSON, который содержит путь к загруженному файлу или путь к автоматически сгенерированному эскизу. Для целей этого примера мы просто вернем содержимое объекта файла — то есть набор метаданных — предоставленных Multer:

 return res.status( 200 ).send( req.file ); 

Ответ будет выглядеть примерно так:

 { fieldname: 'file', originalname: 'myfile.jpg', encoding: '7bit', mimetype: 'image/jpeg', destination: 'uploads/', filename: 'fbcc2ddbb0dd11858427d7f0bb2273f5', path: 'uploads/fbcc2ddbb0dd11858427d7f0bb2273f5', size: 15458 } 

Обработка ошибок загрузки

Если ваш ответ в формате JSON — то есть тип ответа установлен на application/json — тогда плагин ошибки по умолчанию DropzoneJS ожидает, что ответ будет выглядеть следующим образом:

 { error: 'The error message' } 

Если вы не используете JSON, он просто использует тело ответа, например:

 return res.status( 422 ).send( 'The error message' ); 

Давайте продемонстрируем это, выполнив пару проверочных проверок загруженного файла. Мы просто дублируем проверки, которые мы выполняли на клиенте — помните, что проверка на стороне клиента сама по себе никогда не бывает достаточной.

Чтобы убедиться, что файл является изображением, мы просто проверим, что Mime-тип начинается с image/ . ES6 String.prototype.startsWith() идеально подходит для этого, но давайте установим для него polyfill :

 npm install string.prototype.startswith --save 

Вот как мы можем выполнить эту проверку и, если она потерпит неудачу, вернуть ошибку в формате, который ожидает обработчик ошибок Dropzone по умолчанию:

 if ( !req.file.mimetype.startsWith( 'image/' ) ) { return res.status( 422 ).json( { error : 'The uploaded file must be an image' } ); } 

Совет: Я использую HTTP Status Code 422, Unprocessable Entity здесь для сбоя проверки, но 400 Bad Request так же действителен; действительно, все, что находится за пределами диапазона 2хх, заставит плагин сообщать об ошибке.

Давайте также проверим, что изображение имеет определенный размер; пакет размера изображения делает его действительно простым, чтобы получить размеры изображения. Вы можете использовать его асинхронно или синхронно; мы будем использовать последнее для простоты:

 var dimensions = sizeOf( req.file.path ); if ( ( dimensions.width < 640 ) || ( dimensions.height < 480 ) ) { return res.status( 422 ).json( { error : 'The image must be at least 640 x 480px' } ); } 

Давайте соберем все это вместе в полном (мини) приложении:

 var express = require( 'express' ); var multer = require( 'multer' ); var upload = multer( { dest: 'uploads/' } ); var sizeOf = require( 'image-size' ); var exphbs = require( 'express-handlebars' ); require( 'string.prototype.startswith' ); var app = express(); app.use( express.static( __dirname + '/bower_components' ) ); app.engine( '.hbs', exphbs( { extname: '.hbs' } ) ); app.set('view engine', '.hbs'); app.get( '/', function( req, res, next ){ return res.render( 'index' ); }); app.post( '/upload', upload.single( 'file' ), function( req, res, next ) { if ( !req.file.mimetype.startsWith( 'image/' ) ) { return res.status( 422 ).json( { error : 'The uploaded file must be an image' } ); } var dimensions = sizeOf( req.file.path ); if ( ( dimensions.width < 640 ) || ( dimensions.height < 480 ) ) { return res.status( 422 ).json( { error : 'The image must be at least 640 x 480px' } ); } return res.status( 200 ).send( req.file ); }); app.listen( 8080, function() { console.log( 'Express server listening on port 8080' ); }); 

Совет: для краткости этот код на стороне сервера не реализует защиту CSRF; Вы можете посмотреть на пакет как CSURF для этого.

Этот код вместе со вспомогательными ресурсами, такими как представление, вы найдете в прилагаемом репозитории .

Резюме

DropzoneJS — это удобный, мощный и настраиваемый плагин JavaScript, который позволяет загружать элементы управления загрузкой файлов и выполнять загрузки AJAX. В этой статье мы рассмотрели ряд доступных опций, события и способы настройки плагина. Это гораздо больше, чем можно обоснованно описать в одной статье, поэтому посетите официальный веб-сайт, если хотите узнать больше — но, надеюсь, этого достаточно, чтобы начать работу.

Мы также создали действительно простой серверный компонент для обработки загрузки файлов, демонстрирующий, как заставить их работать в тандеме.

Эта статья была рецензирована Панайотисом Велисаракосом , Таулантом Спахиу и Нильсоном Жаком . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!