Scribd
Upload
3 views3 pages

FilePond & Cloudinary Integration Guide

The document outlines the integration of Filepond, a JavaScript library for file uploads, with Cloudinary for image optimization and uploading. It includes installation instructions, code snippets for setting up Filepond with React, and a method for handling server options to upload files to Cloudinary. Additionally, it describes how to update articles with uploaded images using React hooks and file management techniques.

Uploaded by

farahhadil33
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

FilePond & Cloudinary Integration Guide

The document outlines the integration of Filepond, a JavaScript library for file uploads, with Cloudinary for image optimization and uploading. It includes installation instructions, code snippets for setting up Filepond with React, and a method for handling server options to upload files to Cloudinary. Additionally, it describes how to update articles with uploaded images using React hooks and file management techniques.

Uploaded by

farahhadil33
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Ajout article avec filepond

et cloudinary
On va utiliser Filepond qui est une bibliothèque JavaScript qui peut
télécharger tout ce que vous lui lancez, optimise les images pour des
téléchargements plus rapides et offre une expérience utilisateur
exceptionnelle, accessible et fluide.

[Link]

Faire les installations suivantes :

npm i filepond --legacy-peer-deps


npm i react-filepond --legacy-peer-deps
npm i filepond-plugin-image-exif-orientation --legacy-peer-deps
npm i filepond-plugin-image-preview --legacy-peer-deps

import { FilePond,registerPlugin } from 'react-filepond'


import 'filepond/dist/[Link]';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-
orientation'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond-plugin-image-preview/dist/[Link]'

registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)

const [files, setFiles] = useState([]);


Méthode serverOptions

const serverOptions = () => { [Link]('server pond');


return {
process: (fieldName, file, metadata, load, error, progress, abort) => {
[Link](file)
const data = new FormData();

[Link]('file', file);
[Link]('upload_preset', 'Ecommerce_cloudinary');
[Link]('cloud_name', 'iset-sfax');
[Link]('publicid', [Link]);

[Link]('[Link]
data)
.then((response) => [Link])
.then((data) => {
[Link](data);
setArticle({...article,imageart:[Link]}) ;
load(data);
})
.catch((error) => {
[Link]('Error uploading file:', error);
error('Upload failed');
abort();
});
},
};
};

Ajouter filepond dans le view

<div className="form-group">
<label htmlFor="prix">Image</label>
<div style={{ width: "80%", margin: "auto", padding: "1%" }}>
<FilePond
files={files}
acceptedFileTypes="image/*"
onupdatefiles={setFiles}
allowMultiple={true}
server={serverOptions()}
name="file"

/>

</div>
Update article

useEffect(() => {

loadscategories()
setFiles( [
{
source: [Link],
options: { type: 'local' }
}
])

}, [])

load: (source, load, error, progress, abort, headers) => {


var myRequest = new Request(source);
fetch(myRequest).then(function(response) {
[Link]().then(function(myBlob) {
load(myBlob);
});
});
},

You might also like