Custom Upload Button

user_812919 0
Viewed 39863

hi i was just wondering how you can create you own custom file upload button, because the best i can do is

enter image description here

and what i want to achieve is

enter image description here

if there is anyway of doing this i would be very thankful, and please can i have answers that explain how to do it with code and not answers with links to websites that allow you to download a button or something like that,Thank You :)

upload javascript
8 Answers

In Vue JS If you wanna put the upload image button inside the textarea use Relative and Absolute position to put the camera icon inside the textarea use bottom-3 right-4 to find the proper position

<div class="field relative">
        <label>Description</label>
        <textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
        <label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
          <input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
        </label>
  </div>

if not inside the textarea box, just one custom upload button then just keep the code like this

 <label for="upload-file" class="icn icn-camera cursor-pointer">
      <input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
    </label>

change the default upload file icon to a camera icon

user_109157840
Related