Abp Framework - Volo Forms - File Upload

28 Views Asked by At

Good afternoon. I am using an Abp Framework form, however, when trying to insert the upload option, I am unsuccessful, I have already made several changes to the source files, however, none are reflected in the frontend, nor do any compilation or console errors occur.

Below is a snippet of the code in the Vue-question-choice.js file

            <!-- Dropdown -->
            <div v-if="questionType === 5">
                <div class="row" v-for="(choice, index) in questionChoices">
                    <div class="col-10">
                        <div class="input-group mb-3">
                            <div class="input-group-text">
                                <span>{{index+1}}</span>
                            </div>
                            <input ref="option" v-model="choice.value" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-1 can-be-hidden">
                        <button v-if="questionChoices.length>1" v-on:click="remove(index)" type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Remove">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
                <div class="row can-be-hidden"> 
                    <div class="col-8">
                        <div class="input-group mb-3">
                            <div class="input-group-text">
                                <span>{{(questionChoices.length+1)}}</span>
                            </div>
                            <div class="add-option" style="padding-top: 0.5em">
                                <a class="text-start" v-on:click="add" href="javascript:void(0)">
                                    <span> {{l("Choice:AddOption")}} </span>
                                </a>
                            </div>        
                        </div>
                    </div>
                </div>
            </div>

            <!-- FileUpload -->
            <div v-if="questionType === 9">
                <div class="row">
                    <div class="col-11">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                            </div>
                            <div class="custom-file">
                                <input type="file"
                                       class="custom-file-input"
                                       id="inputGroupFile01"
                                       aria-describedby="inputGroupFileAddon01"
                                       @change="handleFileUpload($event)"
                                       ref="fileUpload">
                                <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-1">
                        <button type="button" class="btn btn-danger" @click="removeFile">Remove</button>
                    </div>
                </div>
            </div>`

My idea is to just implement the option and field for uploading files. But without success so far. Something similar to what we have in Google Forms.

0

There are 0 best solutions below