Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting initial image, results in choseFile = null #221

Open
Neophen opened this issue Jan 13, 2020 · 2 comments
Open

Setting initial image, results in choseFile = null #221

Neophen opened this issue Jan 13, 2020 · 2 comments

Comments

@Neophen
Copy link

Neophen commented Jan 13, 2020

Setting the initialImage to a url in any way will break chosenFile,

Steps to reproduce:

  1. set the initial image to url in any way
  2. choose a new file

error:
croppa.chosenFile === null

expected:
croppa.chonsenFile = file

I've tried:

  1. using the slot for initial image
  2. loading the image
    onMounted(() => {
      const img = new Image();
      img.onload = () => {
        state.image = img;
        state.croppa.refresh();
      };
      img.src = state.initialImg;
    });
  1. setting the initial image on the croppa component, fails with CORS policy, i'm loading an image from S3 bucket.
@Neophen
Copy link
Author

Neophen commented Jan 13, 2020

Here is the vue component

    <div class="flex items-center justify-center">
      <croppa
        v-model="croppa"
        :width="390"
        :height="390"
        accept=".jpeg, .png"
        :initial-image="image"
        placeholder
        :class="{'has-file' : initialImg || croppa.chosenFile}"
        canvas-color="#FFF"
        :show-remove-button="false"
        :prevent-white-space="true"
        @draw="manipulated = true"
      >
        <div
          v-if="!initialImg && !croppa.chosenFile"
          @click="croppa.chooseFile()"
          class="absolute inset-0 flex items-center justify-center"
        >
          <div class="placehoder">
            <div class="mx-auto w-16 mb-5">
              <icon icon="image" class="w-full fill-current" />
            </div>
            <p class="font-label underline">Click to select profile picture</p>
          </div>
        </div>

        <div
          v-if="initialImg || croppa.chosenFile"
          class="absolute left-0 bottom-0 w-full mb-10 flex items-center justify-center"
        >
          <o-button type="secondary" class="--small" @click="chooseFile">Edit</o-button>
        </div>
      </croppa>
    </div>

@Neophen
Copy link
Author

Neophen commented Jan 14, 2020

Yeah this is a nasty bug.

Basically:

  1. setting initialImage and choosing another file, will result in chosenFile = null.
  2. or not setting initialImage and choosing one file and then another, will result in chosenFile = null.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant