CODEWITHSUNDEEP
htmlvue.jsecmascript-6vuejs2
t56k
t56k

Reputation: 6981

File input multiple with params

I want an input that permits multiple files with file-specific params. What are my options? I'm in Vue so forgive the idiomatic HTML.

<input type="file" multiple @change="handle()" :data-page-number="whatever" />

Is there any way to do this within a multiple input? Or do I need to nest-and-repeat single inputs with their own specific fields for page-number etc?

Upvotes: 0

Views: 259

Answers (1)

Tim Wickstrom
Tim Wickstrom

Reputation: 5701

It's Vue, but it's also HTML, so all input options for file upload are available to you. I am not sure what "types" you are looking for but this should get you started:

// In your template
<input
  type="file"
  multiple
  name="uploadFieldName"
  :disabled="isSaving" // Optional add a data property isSaving default false
  @change="filesChange($event.target.name, $event.target.files, $event.target.files.length)";
  accept="image/*"
  // or for many
  accept="image/png, image/jpeg"
  class="input-file"
>

For all input attributes see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

// add to your component methods
filesChanged (inputName, files, filesCount) {
  // Do Stuff 
  // if using saving this.isSaving = true; to disable input
}

The files argument will contain an array of File(s) for all option see: https://developer.mozilla.org/en-US/docs/Web/API/File

Hope this helps get you pointed in the right direction. If this answer missed the mark a bit please update your question with more relevant information around what you are trying to achieve and I can help clarify.

Upvotes: 1

Related Questions