ImageKit.io - это готовый к использованию облачный CDN, сервер изображений, механизм манипуляции и хранилище для разработчиков веб-сайтов и мобильных приложений. Это помогает мгновенно доставлять оптимизированные изображения на все платформы. Обычно установка ImageKit в новых или существующих проектах занимает от 10 до 15 минут. Все, что вам нужно сделать, это изменить имя хоста в URL-адресах изображений, и почти все оптимизации начнут работать мгновенно.
Dropzone - это библиотека JS с открытым исходным кодом, которая обеспечивает загрузку файлов перетаскиванием с предварительным просмотром изображений. Он легкий, не зависит от какой-либо другой библиотеки (например, jQuery) и обладает широкими возможностями настройки.
Кому следует прочитать эту статью?
Если вы хотите загружать изображения из своего веб-приложения прямо в медиатеку ImageKit.io. Загружаемое изображение никогда не попадает на ваш сервер. Это снижает нагрузку на ваши серверы. Ваш сервер используется только для генерации подписи для запроса загрузки изображения. Подпись предотвращает злоупотребление вашей учетной записью ImageKit третьими лицами.
Создайте учетную запись на ImageKit.io
Если вы еще не зарегистрировались, легко начать бесплатно. После регистрации вы будете перенаправлены на свою панель управления. В разделе настроек изображения - ›раздел загрузки на панели инструментов вы получите свой открытый и закрытый ключи API. Мы будем использовать эти ключи позже для генерации подписей для загрузки изображений. Прочтите, чтобы узнать, как это сделать.
Примечание. Ваш закрытый ключ не должен отображаться в коде на стороне клиента. Он предназначен для использования только на стороне сервера.
Трехэтапный процесс загрузки
Загрузка изображений на стороне клиента выполняется в два этапа: настройка Dropzone для добавления изображений для загрузки, создание подписи для загрузки и отправка запроса на загрузку в ImageKit.
1. Настройка Dropzone
Документацию по Dropzone можно найти здесь. Включите Dropzone.js на свою страницу, используя тег скрипта или модуль AMD для RequireJS. В любом случае вы получите доступ к конструктору Dropzone.
Dropzone необходимо инициализировать для определенного элемента на этой странице. В нашем примере мы хотим сделать всю страницу зоной перетаскивания. Поэтому мы используем ‘body’ как селектор элемента. Dropzone также требует параметра «url», который по сути является конечной точкой API для загрузки изображений. Вам нужно будет установить его равным конечной точке загрузки ImageKit. Обратите внимание, что вам нужно будет заменить «imagekitId» на свой ImageKit ID. ImageKit.io требует, чтобы файлы изображений были доступны в параметре формы ‘image’. Это устанавливается с помощью параметра ‘paramName’ Dropzone.
var myDropZone = new Dropzone("body", {
"paramName" : "image",
"url" : "https://upload.imagekit.io/rest/api/image/imagekitId"
});
Также нам нужно ограничить зону перетаскивания, чтобы принимать только файлы изображений. Мы также можем ограничить размер файла и максимальное количество параллельных загрузок. Ниже приведен пример кода, который реализует эти ограничения с помощью Dropzone.
var myDropZone = new Dropzone("body", {
"paramName" : "image",
"url" : "https://upload.imagekit.io/rest/api/image/imagekitId",
"parallelUploads" : 5,
"maxFilesize" :25,
"acceptedFiles" : "image/*"
});
ImageKit ожидает некоторые дополнительные параметры, такие как подпись, apiKey, timestamp вместе с загружаемым файлом. Вы можете обратиться к документации ImageKit.io для понимания этих параметров. Нам нужно будет передать эти параметры, прежде чем Dropzone отправит этот запрос в ImageKit.io.
Но прежде чем мы перейдем к добавлению этих параметров, давайте посмотрим на второй этап загрузки изображения, то есть как получить подпись для нашего запроса на загрузку.
2. Создание подписи загрузки
Dropzone.js предоставляет функцию обратного вызова ‘accept’ всякий раз, когда файл перетаскивается в зону перетаскивания. В этой функции ‘accept’ вы можете получить подпись запроса загрузки со своего сервера и сохранить ее для отправки позже в запросе загрузки с другими параметрами.
Подпись требует, чтобы вы использовали свой закрытый ключ API. А поскольку закрытый ключ не должен быть открыт на каком-либо клиентском устройстве, генерация подписи всегда должна происходить только на вашем сервере. API для генерации подписи должен быть защищенным и доступным только для прошедших аутентификацию пользователей на вашем веб-сайте. В противном случае сторонние лица смогут создавать подписи для загрузки с ваших серверов.
Для создания подписи требуются три параметра - ‘filename’, ‘timeStamp’ и ‘apiKey’. ‘filename’ - имя загружаемого файла, например sample.jpg. ‘timeStamp’ - отметка времени Unix в секундах для времени начала загрузки. Запрос на загрузку действителен только в течение 30 минут с этой отметки времени. «apiKey» - это ваш открытый ключ API, который можно получить в разделе «Настройки» на панели инструментов. Сделайте сериализованную строку из этих параметров. Параметры должны быть отсортированы в алфавитном порядке ключей, т. Е. apiKey предшествует filename, то есть перед timestamp.
Сериализованная строка параметров
apiKey = publicapikey & filename = my-image.jpg & timestamp = 123456789
Используя свой закрытый ключ API в качестве секретного ключа, вычислите шестнадцатеричный дайджест HMAC-SHA1 этой сериализованной строки параметров. Это будет ваша подпись загрузки.
Пример кода в NodeJS, использующий модуль «crypto», будет выглядеть следующим образом.
var signature = crypto.createHmac("sha1", "myprivatapikey")
.update(serialisedString)
.digest("hex");
Пример шестнадцатеричного дайджеста HMAC-SHA1
bb1bbbac78a83cec024dd19d42faf1cd45af2364
Объединив эту конечную точку генерации подписи с нашим кодом Dropzone, мы теперь получаем
var myDropZone = new Dropzone("body", {
"paramName" : "image",
"url" : "https://upload.imagekit.io/rest/api/image/imagekitId",
"parallelUploads" : 5,
"maxFilesize" : 25,
"acceptedFiles" : "image/*",
"accept" : function(file, done) {
$.ajax({
"url" : "/your/api/for/creating/upload/signature",
"data" : {
"fileName" : file.name,
"timestamp" : file.timeStamp
},
"success" : function(token) {
file.uploadSignature = token;
done();
}
});
}
});
3. Отправка запроса на загрузку в ImageKit.io
Теперь, когда у нас есть все необходимые параметры для запроса на загрузку, нам нужно добавить их в запрос перед отправкой в ImageKit. Это можно сделать с помощью параметра «отправка» в Dropzone. Функция, указанная в этой опции, вызывается непосредственно перед отправкой запроса по указанному URL-адресу. В этой функции мы добавим все остальные необходимые параметры загрузки. Окончательный код выглядит так -
var myDropZone = new Dropzone("body", {
"paramName" : "image",
"url" : "https://upload.imagekit.io/rest/api/image/imagekitId",
"parallelUploads" : 5,
"maxFilesize" : 25,
"acceptedFiles" : "image/*",
"accept" : function(file, done) {
$.ajax({
"url" : "/your/api/for/creating/upload/signature",
"data" : {
"fileName" : file.name,
"timestamp" : file.timeStamp
},
"success" : function(token) {
file.uploadSignature = token;
done();
}
}
});
},
"sending" : function(file, xhr, formData) {
formData.append("filename", file.name);
formData.append("timestamp", file.timeStamp);
formData.append("apiKey", apiKey);
formData.append("signature", file.uploadSignature);
}
});
Это завершает простой способ напрямую загружать изображения в медиатеку ImageKit.io из браузера клиента. Используя этот метод, ваши серверы остаются свободными для других важных задач.
Единственное, что важно помнить, это то, что закрытый ключ API или логика генерации подписи не должны быть открыты на стороне клиента. Кроме того, конечная точка API создания подписи должна быть доступна только авторизованным пользователям вашего веб-приложения.
Если у вас есть какие-либо вопросы, проблемы или предложения, напишите нам по адресу [email protected]
