Skip to content

Instantly share code, notes, and snippets.

@nandorojo
Created July 13, 2019 22:42
Show Gist options
  • Save nandorojo/7063a8d15bd3bb235949882f14674985 to your computer and use it in GitHub Desktop.
Save nandorojo/7063a8d15bd3bb235949882f14674985 to your computer and use it in GitHub Desktop.
React Native Hook for uploading file (Cloudinary in this case)
import { useState } from 'react';
import CryptoJS from 'crypto-js';
// upload a file to cloudinary using React Hooks
// see below for what hooks are
// https://reactjs.org/docs/hooks-intro.html
// make sure you fill these out:
const API_KEY = '';
const SECRET = '';
const CLOUD_NAME = '';
export function useUploadToCloudinary() {
const [isUploading, setIsUploading] = useState(true);
const [hasErrored, setError] = useState(false);
const [response, setResponse] = useState(null);
const [progress, setProgress] = useState(0);
const [uploadedUrl, setUploadedUrl] = useState('');
const start = (
uri: string,
contentType: 'image' | 'video',
callback?: (arg: object) => void,
) => {
try {
if (!uri) {
throw new Error('missing URI to upload...😔');
} else if (!contentType) {
throw new Error('missing contentType to upload...📸📹');
}
const timestamp = ((Date.now() / 1000) | 0).toString();
const apiKey = API_KEY;
const apiSecret = SECRET;
const cloud = CLOUD_NAME;
const hashString = `timestamp=${timestamp}${apiSecret}`;
const signature = CryptoJS.SHA1(hashString).toString();
const uploadUrl = `https://api.cloudinary.com/v1_1/${cloud}/${contentType}/upload`;
const xhr = new XMLHttpRequest();
xhr.open('POST', uploadUrl);
xhr.onload = () => {
const res = JSON.parse(xhr.response);
if (callback) callback(res);
setResponse(res);
setUploadedUrl(res.secure_url);
};
xhr.onerror = e => {
setIsUploading(false);
setError(true);
console.log(e, '🚨 story upload failed, never properly sent to cloudinary');
};
xhr.ontimeout = e => {
setIsUploading(false);
setError(true);
console.warn(e, '⏰ cloudinary upload timed out');
};
let array = uri.split('.');
let fileEnding = array[array.length - 1].toLowerCase();
fileEnding = fileEnding || 'jpg';
const formData = new FormData();
formData.append('file', {
uri: uri,
type: `${contentType}/${fileEnding}`,
name: `upload.${fileEnding}`,
});
formData.append('timestamp', timestamp);
formData.append('api_key', apiKey);
formData.append('signature', signature);
xhr.send(formData);
if (xhr.upload) {
xhr.upload.onprogress = ({ total, loaded }) => {
setProgress(loaded / total);
};
}
} catch (e) {
console.error('upload to cloudinary hook error', e);
}
};
return { start, uploadedUrl, response, isUploading, hasErrored, progress };
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment