How to trigger file upload in a framework 7 application?

Questions
1

I want to perform an file upload using framework 7 if possible but i do not know to to continue. I know it is possible with html5 with a code like this, even if I implement it,

  1. How can I trigger a html with a button ? Putt it in a popup what is the best/general usage ?

  2. Second question, will html file input work in ios and android ? or I should I implement them externally ?

<input class="button button-big button-fill" type='file' id='_file' accept="image/*;capture=camera">
2

Do you mean:
$$(’#_file’).trigger(‘click’);

Might want to on(‘change’) as well to auto upload should your form elements be hidden and you don’t want to have a submit button.

3

I use vuejs + f7 v2 and upto today I always used f7’s components. I do not know what to attach/trigger an html code directly in my project

Should I use DOM manipulation for that, or add html as template, can someone provide an example that I can use in vuejs method ?

4

I tried to put but it doesnt seem good on screen, how can I change the appearance ?

  .tabs
    #tab-1.page-content(:class="tabActiveChat")
      .page-content.messages-content.a
        .chat-div(v-for='message in filtredMessages', :key='message.timestamp', v-if='renderMessages')
          left-chat-bubble.leftBBl.messageLine(:message='message', v-if='message.sender === conversationId', :contact='selectedContacts[0]')
          right-chat-bubble.rightBBl.messageLine(:message='message', v-else)
      .toolbar.toolbar-bottom-md.messagebar
        .toolbar-inner
        input#_file.button.button-big.button-fill(type="file" accept="image/*;capture=camera")

chooser

5

Sorry, don’t know Vue, basically you want to “display:none”. Put a button with the camera icon and on click, trigger click on the input

6

Framework doesnt matter, its javascript, how can I access that file uploader from javascript ? with DOM manipulation ? can you provide some piece of code ?

What I want to do is, trigger file upload from my button, not from chooser as seen in the image

code doees not include word “choose” but choose is seen on screen ?

I have this list-item and I want to open file chooser when this list-item clicked

f7-list-item.my-cursor(:title="$t('SEND_FILE')")
7

It is impossible to upload files with button only, input(type=file) is always required, you can just make it invisible inside of button

8

Here is some examples how people do it on web https://stackoverflow.com/questions/31693296/is-it-possible-to-make-a-button-as-file-upload-button

9

And here is a good resource on MDN how to work with such inputs https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

10

thanks for the links I will have a look, meanwhile I think something misundersood, of course file dialog needed (input tag)I do not want to hide it, I just asked how I can trigger it from my own button instead of choose button,

@plague69 How to do that ?

Put a button with the camera icon and on click, trigger click on the input

11

Ah, I think you misunderstood. The “Choose” button is the input[file]. You can’t change the text either, that’s why we thought you wanted to hide the button as it is the only way to show it as something nicer looking.

Whatever it is you want, hidden or not, just find the input element and trigger click with your own button.

Eg:
<a href="#" onClick="test()">Test</a>

<script>
function test()
{
$$(’#_file’).trigger(‘click’);
}
</script>
1 Like
12

Hmm, so you access file element with some css selector right ?

Right now I am on a holiday dont have to test it but I wonder if I need something to get #file work ? is type='file enough in below line ?

<input class="button button-big button-fill" type='file' id='_file' accept="image/*;capture=camera">
13

Hash (#) means id, dot(.) means class

#_file selects id=’_file’ from your input

ID’s must all be unique, classes can be repeated

1 Like
14

File dialog does not appear with this code, it reaches code but produces no error

method

  methods: {
    openFileDialog: function() {
      this.Dom7('#_file').trigger('click');
    },

so I added id attribute explicity but I get error Duplicate attribute “id” is not allowed

input#_file.button.button-big.button-fill(id="_file", type="file" accept="image/*;capture=camera")

I get same error even if I rename it to input#_file1

another isuse hidden is not working doesn hide it

input#_file1.button.button-big.button-fill(hidden="",