Open sandeshsapkota opened 2 years ago
my method:
@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>```
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)
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.
@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.
@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)```
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
how do we always show modal with preview state of the existing image when there is already existing image.
thank you.