How do I improve the upload speed of videos/large files to cloudinary?

drawesome

Hi, Ive written the function below to allow users of my website to upload videos to cloudinary. Whilst the function works, it is extremely slow. Its not my internet connection, as I've got 50mbps up and to upload a 30MB file its taking 30-40 seconds. My users will be uploading video files of about 400-500MBs, so this speed is too slow. What are my options to optimise the upload speed to cloudinary?

const uploadToCloudinary = async (): Promise<UploadResult> => {

setUploading(true);

setUploadProgress(0);

if (!selectedFile) {

alert('Please select a file first.');

setUploading(false);

return Promise.reject(new Error('No file selected'));

}

// Fetch the signature

const { signature, timestamp } = await fetchSignature();

console.log('Parameters sent from client:', { timestamp, upload_preset: 'default' });

if (!signature || !timestamp) {

alert('Could not get the signature for upload.');

setUploading(false);

return Promise.reject(new Error('Failed to get signature'));

}

return new Promise((resolve, reject) => {

const formData = new FormData();

formData.append('file', selectedFile);

formData.append('upload_preset', 'racerevolt');

formData.append('timestamp', timestamp);

formData.append('signature', signature);

formData.append('api_key', 'XXXX');

formData.append('eager', 'w_388,c_auto,f_jpg');

const xhr = new XMLHttpRequest();

xhr.open('POST', 'https://api.cloudinary.com/v1_1/XXXX/upload', true);

xhr.upload.onprogress = event => {

if (event.lengthComputable) {

const percent = (event.loaded / event.total) * 100;

console.log(`Progress: ${percent}%`);

setUploadProgress(percent);

}

};

xhr.onload = () => {

setUploading(false);

setUploadProgress(100);

if (xhr.status === 200) {

const response = JSON.parse(xhr.responseText);

console.log('LN162: upload response:', response);

const videoUrl = response.secure_url;

const thumbnailUrl =

response.eager && response.eager[0] ? response.eager[0].secure_url : null;

setVideoUrl(videoUrl);

setThumbnailUrl(thumbnailUrl);

resolve({ videoUrl, thumbnailUrl });

console.log('LN169: thumbnailUrl: ' + thumbnailUrl);

} else {

console.error('Upload failed:', xhr.responseText);

reject(new Error('Upload failed'));

}

};

xhr.onerror = () => {

console.error('Error during upload:', xhr.responseText);

setUploading(false);

reject(new Error('Error during upload'));

};

xhr.send(formData);

});

};

Tamara

Hi there,

Generally, uploads are done against our servers in the US, therefore considering your location and size of files, upload time may vary.

If you see any specific issue, where you think the upload time is higher than expected, please feel free to share a few examples with us, and we'll be happy to take a closer look.

Upon reviewing your code, I noticed that you are leveraging eager transformations, a great feature that processes enhancements asynchronously. While this is a recommended approach for improved quality, it does extend the upload time due to its asynchronous nature.

To optimize your upload speed, consider transitioning to modern asynchronous operations like `fetch` or `axios` instead of the older `XMLHttpRequest`. These contemporary methods offer enhanced efficiency and cleaner code.

Additionally, you might explore using our Upload Widget, a purpose-built tool designed for optimal performance.

Best regards,

Tamara