For a demonstration of HTML5 Upload using Cloudinary, you can refer to the CodePen example provided below.
If you are working with Nuxt, there shouldn't be any issues as this process occurs post-rendering.
Please visit the following link for the CodePen example: CodePen Cloudinary Example
Here is the JavaScript code extracted from the CodePen:
JS
const cloudName = 'demo';
const unsignedUploadPreset = 'doc_codepen_example';
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem"),
urlSelect = document.getElementById("urlSelect");
fileSelect.addEventListener("click", function(e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
urlSelect.addEventListener("click", function(e) {
uploadFile('https://res.cloudinary.com/demo/image/upload/sample.jpg')
e.preventDefault(); // prevent navigation to "#"
}, false);
// Drag and Drop functionality
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
// Function to upload file to Cloudinary
function uploadFile(file) {
var url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`;
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
document.getElementById('progress').style.width = 0; // Reset progress bar
xhr.upload.addEventListener("progress", function(e) {
var progress = Math.round((e.loaded * 100.0) / e.total);
document.getElementById('progress').style.width = progress + "%";
console.log(`fileuploadprogress data.loaded: ${e.loaded},
data.total: ${e.total}`);
});
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var url = response.secure_url;
var tokens = url.split('/');
tokens.splice(-2, 0, 'w_150,c_scale');
var img = new Image();
img.src = tokens.join('/');
img.alt = response.public_id;
document.getElementById('gallery').appendChild(img);
}
};
fd.append('upload_preset', unsignedUploadPreset);
fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
fd.append('file', file);
xhr.send(fd);
}
// Handle selected files
var handleFiles = function(files) {
for (var i = 0; i < files.length; i++) {
uploadFile(files[i]);
}
};
HTML:
<div id="dropbox">
<h1>Client-Side Upload to Cloudinary with JavaScript</h1> Learn more in this blog post - <a href="https://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud">Direct upload made easy from browser or mobile app to the cloud</a>
<form class="my-form">
<div class="form_line">
<h4>Upload multiple files by clicking the link below or by dragging and dropping images onto the dashed region</h4>
<div class="form_controls">
<div class="upload_button_holder">
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>
<a href="#" id="urlSelect">URL Upload</a>
</div>
</div>
</div>
</form>
<div class="progress-bar" id="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div id="gallery" />
</div>
</div>