Mehran Mehran - 1 year ago 118
AngularJS Question

File uploading in a local drive with angularjs

I'm beginner in angularjs.
I read a lot about file uploading and etc.
But couldn't find any topics for this case that i will describe in further.

I want to choose a file with helping of a button(with search Name) in below code

then when we click on second button (with upload Name), my chose file upload in a local drive that i made in D:\Uploaded Files already

for example
I want choose a file from desktop with search button, then when we click on upload, this file copy to D:\Uploaded Files

If it's possible please show me in fiddler.
Thanks all.

Thanks all for shairing

Answer Source

You need to use a directive like below.

uploader.directive("readfile", [function () {
return {
    scope: {
        readfile: "="
    link: function (scope, element, attributes) {
        element.bind("change", function (changeEvent) {
            var reader = new FileReader();
            reader.onload = function (loadEvent) {
                scope.$apply(function () {
                    scope.readfile = { "FileName"'\\').pop() , "Content" , "Size" };


and for uploading the files:

function MyCTRL($scope, $http, $modal)





$scope.fileUpload=function () 


    $scope.attachedFile.push ({

        "fileGUID": GUID() + "." + $scope.currentFile.FileName.split('.').pop(),
        "fileName": $scope.currentFile.FileName,
        "fileGroup": $scope.currentFileGroup,
        "fileDescription": $scope.currentFileDescription,
        "fileSize": $scope.currentFile.Size,
        "fileContent": $scope.currentFile.Content,
        "fileState": "wait"

    $scope.currentFile = "";
    $scope.currentFileGroup = "";
    $scope.currentFileDescription = "";

    var saveFile = new dataStructure();
    var fileContent = "";
    for (var i=0; i < $scope.attachedFile.length; i++) {
        if($scope.attachedFile[i].fileState!="sent") {
        fileContent = $scope.attachedFile[i].fileContent;
        saveFile.EntityInfo[0].Name = $scope.attachedFile[i].fileGUID;
        saveFile.EntityInfo[0].Type = "CUSTOMFILE";

            saveFile.EntityData = [
                {"Content": fileContent}
            var inputjsondata = JSON.stringify(saveFile);
            $http({ method: 'POST', url: rootURL + '/data/savefilecontent', data: inputjsondata, dataType: 'text', processData: false, async: false, headers: { 'Content-Type': 'application/json; charset=utf-8' } }).success(function (data) {
            $scope.attachedFile[i].fileState = "sent";

                "FilenameGUID": $scope.attachedFile[i].fileGUID,
                "Filename": $scope.attachedFile[i].fileName,
                "Group": $scope.attachedFile[i].fileGroup,
                "Description": $scope.attachedFile[i].fileDescription,
                "UploadDate": uploadGregorianDate()                    

and now everything is fine.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download