How could I preview an image without storing in aws s3? - laravel

Question

My question is: Should I create 2 folders: one for temporary and another one for original? I'm using a component for uploading images. When I upload an image, It is stored in s3 and it is retrieved again to be shown in a small image. My problem here is If I upload 1 image and then I decide to upload another one, I uploaded 2 files in the S3 bucket and so on ... without pressing add category.
Finally: I'm using Vue 2 and Laravel 7.x, thanks.
I'm not so familiar with storing process but I need help to decide what is more efficient, thanks.
category.vue
<template>
<Modal v-model="addModal" :closable="false" :mask-closable="false" title="Add a category">
<Input v-model="data.categoryName" placeholder="Add category..."/>
<div class="space"></div>
<Upload ref="uploads" action="/app/upload" :format="['jpg','jpeg','png']" :
headers="{'x-csrf-token': token, 'X-Requested-With': 'XMLHttpRequest'}" :max-size="2048"
:on-error="handleError" :on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"
:on-success="handleSuccess" type="drag">
<div style="padding: 20px 0">
<Icon size="52" style="color: #3399ff" type="ios-cloud-upload"></Icon>
<p> Click or drag files here to upload </p>
</div>
</Upload>
<div v-if="data.iconImage" class="demo-upload-list">
<img :src="`${data.iconImage}`"/>
<div class="demo-upload-list-cover">
<Icon type="ios-trash-outline" #click="deleteImage"></Icon>
</div>
</div>
<div slot="footer">
<Button type="default" #click="addModal=false">Close</Button>
<Button :disabled="isAdding" :loading="isAdding" type="primary" #click="addCategory">
{{ isAdding ? 'Adding ..' : 'Add a category' }}
</Button>
</div>
</Modal>
</template>
<script>
// Other parts of this section are removed for clarity
export default {
methods: {
async addCategory() {
console.log('1', this.data.iconImage)
if (this.data.categoryName.trim() === '') return this.e('This Category is required')
if (this.data.iconImage.trim() === '') return this.e('This Icon Image is required')
this.data.iconImage = `${this.data.iconImage}`
console.log('2', this.data.iconImage)
const res = await this.callApi('post', 'app/create_category', this.data)
if (res.status === 200) {
this.categoryLists.unshift(res.data)
this.s('Category has been succesfully')
this.addModal = false
this.data.categoryName = ''
this.data.iconImage = ''
this.$refs.uploads.clearFiles()
} else {
if (res.status === 422) {
if (res.data.errors.categoryName) {
this.e(res.data.errors.categoryName[0])
}
if (res.data.errors.iconImage) {
this.e(res.data.errors.iconImage[0])
}
} else {
this.swr()
}
}
},
},
}
</script>
My controller for addCategory
public function addCategory(Request $request)
{
$this->validate($request, [
'categoryName' => 'required',
'iconImage' => 'required',
]);
$category = new Category();
$category->categoryName = $request->categoryName;
$category->iconImage = $request->iconImage;
$category->save();
return response()->json($category);
}