I have a Form in ReactJs
and I want to submit both data and files to my php API ( Yii2) endpoint. (I do not want to use the raw Input file upload form as I want to have functions like file preview, cropping and most importantly progress bar on file upload)
After doing some research, I came across Uppy which seems to be a great tool to help in this task. I have been going through the docs and other materials for a few days now.
I have written a function to upload files using uppy file uploader following tutorials such as https://uppy.io/docs/react/
. My function is very buggy as
I do not even see thumbnails generated from files uploaded, I do not see any information on my DragDrop Component.
I am not able to upload the files to my Yii2 API endpoint. I get the error Reason:
CORS header ‘Access-Control-Allow-Origin’ missing with results such as: Object { successful: [], failed: (1) […], uploadID: "cjs3mua0g0001245zctq3nbqa" }
Here is my code for the uppy function
AvatarPicker(currentAvatar ){
const {user} = this.props
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: user.username
})
};
const uppy = Uppy({ autoProceed: true })
.use(Dashboard, { trigger: '#select-files' })
.use(GoogleDrive, { target: Dashboard, serverUrl: apiConstants.API_GENERAL_URL+'changeprofilepic' })
.use(Instagram, { target: Dashboard, serverUrl: apiConstants.API_GENERAL_URL+'changeprofilepic' })
.use(Webcam, { target: Dashboard })
.use(Tus, { endpoint: apiConstants.API_GENERAL_URL+'changeprofilepic?access-token='+user.username, requestOptions })
.on('complete', (result) => {
console.log('Upload result:', result)
})
return (
<div>
<img src={currentAvatar} alt="Current Avatar" />
<DragDrop
uppy={uppy}
locale={{
strings: {
// Text to show on the droppable area.
// `%{browse}` is replaced with a link that opens the system file selection dialog.
dropHereOr: 'Drop here or %{browse}',
// Used as the label for the link that opens the system file selection dialog.
browse: 'browse'
}
}}
/>
</div>
)
And in my component render function, I call the AvatarPicker class as show
{
this.AvatarPicker('./../images/master.png')
}
Any heads up on this issue, propose solutions, fixes or new Ideas to get around my task is highly appreciated.