aico-image-editor
Version:
Combine multiple image into and create single combined image
153 lines (134 loc) • 5.14 kB
JavaScript
Alpine.store('uploadStore', {
uploadFilesToServer(uploadObj) {
const {files,action, type, imageType, originalFile,cropperData} = uploadObj;
const canvasStore = Alpine.store('canvas');
const formData = new FormData();
formData.append('configuratorId', canvasStore.configuratorId)
// append productId when configuratorId is null to first time save as create configurator endpoint
if(!canvasStore.configuratorId){
formData.append('productId', canvasStore.productId)
}
imageType && formData.append('imageType', imageType)
cropperData && formData.append('cropperData[]', JSON.stringify(cropperData));
originalFile && formData.append('originalFiles[]', originalFile);
for (const file of files) {
formData.append(type, file) // appending every file to formdata
}
//console.log(formData.get('backgrounds'))
if(type === 'hexCode') {
canvasStore.isColorBlockLoaderVisible = true;
} else {
canvasStore.isServerLoaderTabVisible = true;
}
return fetch(action, {
method: "POST",
body: formData,
// "timeout": 0,
headers: {
"Authorization": `Bearer ${canvasStore.apiConfig.apiToken}`,
},
redirect: 'follow'
})
.then((response) => {
return response.json()
})
.then((data) => {
canvasStore.isServerLoaderTabVisible = canvasStore.isColorBlockLoaderVisible = false;
canvasStore.configuratorId = data.data.configuratorId;
//console.log(data);
return data;
})
.catch((error) => {
canvasStore.isServerLoaderTabVisible = canvasStore.isColorBlockLoaderVisible = false;
console.error(error);
});
},
updateImageInServer(editUploadObj) {
const {files, action, type, cropperData} = editUploadObj;
const canvasStore = Alpine.store('canvas');
const formData = new FormData();
cropperData && formData.append('cropperData', JSON.stringify(cropperData));
for (const file of files) {
formData.append(type, file) // appending every file to formdata
}
canvasStore.isServerLoaderTabVisible = true;
return fetch(action, {
method: "POST",
body: formData,
// "timeout": 0,
headers: {
"Authorization": `Bearer ${canvasStore.apiConfig.apiToken}`,
},
redirect: 'follow'
})
.then((response) => {
return response.json()
})
.then((data) => {
canvasStore.isServerLoaderTabVisible = false;
//console.log(data);
return data;
})
.catch((error) => {
canvasStore.isServerLoaderTabVisible = false;
console.error(error);
});
},
uploadImageWithoutConfigurator(uploadObj) {
const canvasStore = Alpine.store('canvas');
const formData = new FormData();
const {files, action} = uploadObj;
for (const file of files) {
formData.append('layerFile', file)
}
canvasStore.isServerLoaderCanvasVisible = true;
return fetch(action, {
method: "POST",
body: formData,
// "timeout": 0,
headers: {
"Authorization": `Bearer ${canvasStore.apiConfig.apiToken}`,
},
redirect: 'follow'
})
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not OK');
}
return response.json()
})
.then((data) => {
canvasStore.isServerLoaderCanvasVisible = false;
//console.log(data);
return data;
})
.catch((error) => {
canvasStore.isServerLoaderCanvasVisible = false;
console.error(error);
});
},
deleteFilesFromServer(id, type,fileName) {
const canvasStore = Alpine.store('canvas');
const formData = new FormData();
formData.append('productId', this.$store.canvas.buganoProductId)
formData.append('fileID', id)
formData.append('fileName', fileName)
formData.append('type', type)
canvasStore.isServerLoaderTabVisible = true;
return fetch('http://localhost:6288/delete', {
method: "DELETE",
body: formData,
})
.then((response) => {
return response.json()
})
.then((data) => {
canvasStore.isServerLoaderTabVisible = false;
//console.log(data);
return data;
})
.catch((error) => {
console.error(error);
});
}
})