File uploading in a local drive with angularjs

Question

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

Solution 1

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":changeEvent.target.value.split('\\').pop() , "Content":loadEvent.target.result , "Size":loadEvent.total };
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

For uploading the files:

function MyCTRL($scope, $http, $modal)
{
    $scope.currentFile="";

    $scope.currentFileGroup="";

    $scope.currentFileDescription="";

    $scope.attachedFile=[];

    $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 = "";
    $scope.AddBtnShow=false;

    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";

            $scope.formData.Attachments.push({
                "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.

Solution 2

Did you mean upload a local file from your client computer to a server? or local to local?

If it's the first case:

• File upload sample: https://github.com/danialfarid/angular-file-upload
• If you want to give a try dumping as well to an azure storage: http://lemoncode.net/2014/01/15/angularjs-web-api-azure-storage/ (this sample contains the whole app including a directive, you can remove the azure storage part and directly dump into a server folder).

Comments

[Mehran]

Thanks for the answer Braulio. I mean Local to Local. But your website was useful too. Thanks for shairing.

[Braulio]

Upload local is possible, download local you cannot choose the destination folder, you can launch the download but it will be automatically downloaded to the default download folder or let the user choose. Another option is to use Google Drive or something like that. Well you could do something like that using ActiveX but I do not recommend following that path.

[Braulio]

The reason behind that is security, if a browser could let a web applicatin to download a file in whatever folder withouth explicit permission of the user it could be a security risk (that's why in that option you have to install a signed ActiveX control, or you can create a desktop/console app that is launched by the browser).

[user3211705]

May I know how the html page looks like.. ie. the input format for the directives.. how will $scope.currentFile takes the properties assigned