Skip to content

Instantly share code, notes, and snippets.

@PatrickNiyogitare28
Created July 7, 2023 08:37
Show Gist options
  • Save PatrickNiyogitare28/f2724bca6f0c21a1e39090c897e2b045 to your computer and use it in GitHub Desktop.
Save PatrickNiyogitare28/f2724bca6f0c21a1e39090c897e2b045 to your computer and use it in GitHub Desktop.
import axios from 'axios';
import {IResponse} from '@interfaces/IResponse';

const upload = async (file: File): Promise<IResponse> => {
    const UPLOAD_PRESET: string = (import.meta.env.VITE_CLOUDINARY_UNSIGNED_UPLOAD_PRESET as string);
    const CLOUDINARY_NAME: string = (import.meta.env.VITE_CLOUDINARY_CLOUDNAME as string);
    const CLOUDINARY_API_KEY: string = (import.meta.env.VITE_CLOUDINARY_API_KEY as string);
    const CLOUDINARY_SECRET: string = (import.meta.env.VITE_CLOUDINARY_SECRET as string);
    const CLOUDINARY_IMAGES_FOLDER: string = (import.meta.env.VITE_CLOUDINARY_IMAGES_FOLDER as string);
    let response: IResponse = {} as IResponse;
    const formData = new FormData();
    formData.append("file", file);
    formData.append("tags", `codeinfuse, medium, gist`);
    formData.append("upload_preset", UPLOAD_PRESET); // Replace the preset name with your own
    formData.append("api_key", CLOUDINARY_API_KEY); // Replace API key with your own Cloudinary key
    formData.append("timestamp", (new Date().toDateString()));
    formData.append("folder", CLOUDINARY_IMAGES_FOLDER);
    try {
        // Make an AJAX upload request using Axios (replace Cloudinary URL below with your own)
        const apiResponse: any = await axios.post(`https://api.cloudinary.com/v1_1/${CLOUDINARY_NAME}/image/upload`, formData, {
            headers: { "X-Requested-With": "XMLHttpRequest" },
        }).then(response => {
            const data = response.data;
            const fileURL = data.secure_url // You should store this URL for future references in your app
            return data;
        });
        if (!apiResponse.asset_id) return response = { success: false, error: 'Failed to upload image' }
        response = { success: true, fileUrl: apiResponse.secure_url };
    }
    catch (e: any) {
        return response = { success: false, error: e.message || "Failed to upload image" };
    }
    return response;
}

export const cloudinaryService = { upload };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment