I want to create an file upload button with send some parameters
Here is my code:
it is not working for me.
could you help me?
<pre>
<input type="file" name="file"
onchange="angular.element(this).scope().uploadFile(this.files,project._id, activity._id, action.name, document._id)"/>
</pre>
Insert this HTML into your code where onFileSelect function will be called when file is selected.
<div class="col-xs-2 padding_sm" ng-file-select="onFileSelect($files,$index)"
multiple accept="image/*"></div>
Related
On click of "Import CSV" button, i want to open a "Open file dialog explorer" and on selecting a file and click on open in the explorer, it should trigger a function call(function addCSVFile()). How do i achieve this?
My .js looks like below:
<input type="button" class="btn-import" id="loadFileXml" value="Import CSV"
onclick="document.getElementById('file').click();"/>
<input type="file" style="display:none;" id="file" name="file"/>
onchange and ng-change i have tried. but both are not working. Please help me on this.
Well I don't know angular js but this simple jquery should work if you don't mind using it...
<script src="https://ajax.googleapis.com/libs/jquery/3.4.1/jquery.min.js"></scipt>
<script type="text/javascript">
$(document).ready(function(){
$("#file").on('change',function(){
//do whatever you want
});
});
</script>
You can also use for attribute of label like this...
<label for="file" class="btn-import" id="loadFileXml">Import File</label>
<input type="file" style="display:none;" id="file" name="file"/>
I found a solution to solve this:
*.html i altered like below
<input type="button" class="btn-import" id="loadFileXml" value="Import CSV"
ng-click="vm.file_changed()"/>
<input type="file" style="display:none;" id="file" name="file" accept=".csv"
script-upload="vm.fileToUpload"/>
*.js
function file_changed() {
$('#file').click();
}
function onScriptSelect(files) {
var filename = files[0].name;
}
I am using ng-file-upload for uploading files. But am getting 5 popups for uploading files. How to resolve this. Below am giving am codes please check,
Html Code
<div class="" id="clickToUpload" ng-click="uploadFile()">Upload new file</div>
<input type="file" style="display:none" ng-model="picFile" name="file" class="uploadFile" onchange= "angular.element(this).scope().fileNameChanged(this)" />
controller.js
$scope.uploadOpgsFile = function(){
angular.element(document.querySelectorAll(".uploadFile")).click();
};
$scope.fileNameChanged = function(element){
console.log(element.files);
}
I am new in angular and I have an issue with uploading files from different inputs. All the examples I have seen was about uploading files only from one input.
This is what I need for example :
<form>
<div>
<lable>type file A</lable>
<input type='text'>
<input type='file'>
</div>
<div>
<lable>type file B</lable>
<input type='text'>
<input type='file'>
</div>
<button type='submit'>submit</button>
</form>
In my API I want to get the file type A the file type B and the files A and B.
I do not need the API code but I do need to see how to do it in angular.
I have followed countless examples (from here and other sites) that explain how you upload files from Angular to a web server. I am happy with the solution of using angular-file-upload and processing the data on the server (Node) with Multer.
What I haven't been able to find is a way to upload files from the form with a post that contains all the other controller data.
controller:
$scope.files = [];
$scope.name = "";
$scope.post = //$http post to server from service
view:
<input type="text" ng-model="name">
<input type="file">
<button ng-click="post()">Send post without page refresh</button>
Is there a way I can send the [name] and the [files] in the same post? If I send with multi part data will that be ok for [name] and [files]? Do I need to send two separate posts?
At the moment, my working example submits with a form action of 'post' and an enctype of "multipart/form-data". But I don't want the page to refresh and I want to send [name] and [files] from the scope... do I need to attach the files from the form to the scope or get the scope to pull the files from the DOM?
You can push formData to file before upload.
$scope.uploader.onBeforeUploadItem = function(fileItem) {
fileItem.formData.push({name: $scope.name});
};
Please look through the demo for complete solution :)
Plunkr
<form>
<input type="text" placeholder="Enter Name here" ng-model="newCountry.Name" />
<label>Choose 1 or more files:</label>
<input type="file" ng-files="AddnewCountryFlag($files)" multiple />
<h3>Try Uploading Image file. It will preview your image.</h3>
<div ng-repeat="item in imagesrc">
<img src="{{item.Src}}" />
<label>{{item.Size}}kB</label>
</div>
<input type="submit" value="Send Data" ng-click="AddCountry()" />
I am trying to create a view to send an email by attaching a file. I just started coding but not sure how to attach .could anybody help me for this.
here is my small code.
<div>
<div> To</div>
<div><input type="text" name="" placeholder="" size="70" /></div>
</div>
<div>
<div>Subject</div>
<div><input type="text" name="" placeholder="" size="70"/></div>
</div>
after this I have to add image and by click that image I have to attach a file and enter message, then click send button.
You could take a look at the ngDroplet module.