Closed suriyadi15 closed 4 years ago
i'm using vuejs and have initial file, i also use custom server.
<div> <file-pond ref="tes" :files="files" :server="server" :allow-image-preview="true" :allow-file-poster="false" :image-preview-height="170" image-crop-aspect-ratio="1:1" :image-resize-target-width="200" :image-resize-target-height="200" style-panel-layout="compact circle" style-load-indicator-position="center bottom" style-progress-indicator-position="right bottom" style-button-remove-item-position="left bottom" style-button-process-item-position="right bottom" /> </div> </template> export default { data() { const self = this return { files: [{ source: '12345', options: { type: 'local' } }], server: { process( fieldName, file, metadata, load, error, progress, abort, transfer, options ) { const source = axios.CancelToken.source() const formData = new FormData() formData.append('file', file, file.name) console.log(file) self .$axios({ url: 'url', method: 'POST', data: formData, cancelToken: source.token, headers: { 'Content-Type': `multipart/form-data; boundary=${formData._boundary}` }, onUploadProgress(progressEvent) { progress( progressEvent.lengthComputable, progressEvent.loaded, progressEvent.total ) } }) .then((response) => { load(response.data) }) .catch((thrown) => { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message) } else { error('oh no') } }) return { abort() { source.cancel('Operation canceled by the user.') abort() } } }, load(source, load, error, progress, abort, headers) { console.log('load called') const sourceToken = axios.CancelToken.source() self .$axios({ url: `url/${source}`, method: 'GET', cancelToken: sourceToken.token, onDownloadProgress(progressEvent) { progress( progressEvent.lengthComputable, progressEvent.loaded, progressEvent.total ) } }) .then((response) => { const blob = new Blob([response.data], { type: response.headers['content-type'] }) load(blob) }) .catch((thrown) => { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message) } else { error('oh no') } }) return { abort() { sourceToken.cancel('Operation canceled by the user.') abort() } } }, } } } } </script>
is there something wrong with my code above? how do you bring up an uploaded image?
See this example implementation: https://codesandbox.io/s/vanilla-filepond-preview-server-file-fo1k1
i'm using vuejs and have initial file, i also use custom server.
is there something wrong with my code above? how do you bring up an uploaded image?