after clicking Back and Cancel button and re-opening modal the modal show initial drag-drop / browse state box instead of image preview step

[sandeshsapkota]

Hello @dai-siki ! I would like to thank you for creating wonderful library which is simple and easy to implement.

I am having a issue here when

1. I browse a photo and crop and save it.
2. when I again click to button that opens the modal.. which shows existing image
3. there If I click back button that shows first drag/drop area and there I click cancel button modal closes
   4.now if I click button that opens the modal.. the modal opens showing drag/drop area (which I believe should shows the preview state - 2nd step)

how do we always show modal with preview state of the existing image when there is already existing image.

thank you.

[seakingii]

my method:

<my-upload
:key="key"
@crop-upload-success="cropUploadSuccess"

<script setup lang="ts"> import {ref} from "vue" const key = ref(1); const cropUploadSuccess = function () { //force recreate 设置组件的key值强制重建组件 key.value = new Date().getTime(); } </script>

[sandeshsapkota]

@seakingii Thank you for replying.

this solution not working for me.

Are you trying to re-rendering the my-upload component and expecting that my-upload component will take the existing image dataUrl if there is any ? I have also tried re-rendering the component and that also doesnot solve the problem

here is my code .

<Cropper :data-url="imagePreview" @crop="imageSelected"/>

    <div
        class="transition flex items-center gap-2 !rounded cursor-pointer py-3 px-5 bg-grey-100 text-sm
               hover:text-grey-800
               border-grey-200  border-dotted border-2"
        @click="toggleShow">
        <Icon name="upload"/>
        <span v-text="dataUrl ? 'Edit photo' : 'Upload photo'"></span>
    </div>
    <my-upload
        field="img"
        :max-size="5000"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        @src-file-set="srcFileSet"
        v-model="show"
        :height="100"
        :width="100"
        :params="params"
        :headers="headers"
        lang-type="en"
        :lang-ext="langExt"
        :no-circle="true"
        img-format="png">
    </my-upload>
</template>

<script>
import myUpload from 'vue-image-crop-upload';
import PrimaryButton from "../../Admin/Buttons/PrimaryButton";
import Icon from "./Icon";
import {ref} from "vue"

let key = ref(1);

export default {
    data() {
        return {
            show: false,
            params: {
                token: '123456798',
                name: 'avatar'
            },
            step: 0,
            headers: {
                smail: '*_~'
            },
            field: '',
            langExt: {
                hint: 'Drag and drop or browse to choose a file',
                loading: 'Uploading…',
                noSupported: 'Browser is not supported, please use IE10+ or other browsers',
                success: 'Upload success',
                fail: 'Upload failed',
                preview: 'Preview',
                btn: {
                    off: 'Cancel',
                    close: 'Close',
                    back: 'Back',
                    save: 'Save'
                },
                error: {
                    onlyImg: ' Image support Jpg, Jpeg, Png only. ',
                    outOfSize: 'Image exceeds size limit: ',
                    lowestPx: 'Image\'s size is too low. Expected at least: '
                }
            }
        }
    },
    props: {dataUrl: {Type: String, required: false}},
    emits: ['crop'],
    components: {
        Icon,
        PrimaryButton,
        'my-upload': myUpload
    },
    methods: {
        toggleShow() {
            this.show = !this.show;
        },

        cropSuccess(imgDataUrl) {
            this.$emit('crop', imgDataUrl)
        },

       
        cropUploadSuccess(jsonData, field) {
            key.value = new Date().getTime();
        },
      
        cropUploadFail(status, field) {
          
        },

        srcFileSet(fileName, fileType, fileSize) {
   
        }
    }
}
</script>```

[minhnhut]

I faced same problem.
Here is my workaround:

<crop-upload
            @crop-success="cropSuccess"
            v-if="showAvatarUpload"
            v-model="showAvatarUpload"
            lang-type="en"
            :width="300"
            :height="300"
            :params="{}"
            img-format="jpg"
        />

Force component to be destroy by adding v-if. I think state should be reset internally or some kind of clear() method to reset component's state. I saw method reset(), maybe we can do something like this.$refs.cropper.reset() (not tested yet)

[rizuwan86]

I have the same problem.

And here is my SOLUTION:

replace line:

import myUpload from 'vue-image-crop-upload';

with

import myUpload from 'vue-image-crop-upload/upload-2.vue';

hope this help.

[sandeshsapkota]

@minhnhut Thank you for replying but your solution not working for me. instead it it shows the the dragging box the first time I try to edit image after I set one.

[sandeshsapkota]

@rizuwan86 Thank you for replying.

I tried importing upload-2 but it shows error.

    at Proxy.data (upload-2.vue?0b4d:224)
    at resolveData (runtime-core.esm-bundler.js?5c40:6046)
    at applyOptions (runtime-core.esm-bundler.js?5c40:5864)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6636)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6567)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6503)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4206)
    at processComponent (runtime-core.esm-bundler.js?5c40:4182)
    at patch (runtime-core.esm-bundler.js?5c40:3791)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3975)```