Skip to main content
SharePoint

Return to Question

replaced http://stackoverflow.com/ with https://stackoverflow.com/
Source Link
Community Bot
Community Bot
  • 1

I am using AngularJS, in particular, a directive that outputs base64 encoding, but otherwise I am stuck. See my post in the main Stackoverflow, as I thought it was more of an Angular issue but see this as a SharePoint POST challenge now: http://stackoverflow.com/questions/30824211/upload-properly-encoded-base64-image-to-sharepoint-with-angularjshttps://stackoverflow.com/questions/30824211/upload-properly-encoded-base64-image-to-sharepoint-with-angularjs

I am using AngularJS, in particular, a directive that outputs base64 encoding, but otherwise I am stuck. See my post in the main Stackoverflow, as I thought it was more of an Angular issue but see this as a SharePoint POST challenge now: http://stackoverflow.com/questions/30824211/upload-properly-encoded-base64-image-to-sharepoint-with-angularjs

I am using AngularJS, in particular, a directive that outputs base64 encoding, but otherwise I am stuck. See my post in the main Stackoverflow, as I thought it was more of an Angular issue but see this as a SharePoint POST challenge now: https://stackoverflow.com/questions/30824211/upload-properly-encoded-base64-image-to-sharepoint-with-angularjs

added 910 characters in body
Source Link
Kode
Kode
  • 261
  • 5
  • 19

I have tired multiple header adjustments, and have to think this is related to how SharePoint translates the data. Using an alternate version with SP.RequestExecutor, I get the same issue:

$scope.upload = function () {
        var dataURL = 'data:' + $scope.files.filetype + ';' + 'base64,' + $scope.files.base64;
        var createitem = new SP.RequestExecutor("/sites/asite");
        createitem.executeAsync({
            url: "/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='" + $scope.files.filename + "')",
            method: "POST",
            binaryStringRequestBody: true,
            body: dataURL,
            success: fsucc,
            error: ferr,
            state: "Update"
        });

        function fsucc(data) {
            alert('success');
        }
        function ferr(data) {
            alert('error\n\n' + data.statusText + "\n\n" + data.responseText);
        }
    }

I have tired multiple header adjustments, and have to think this is related to how SharePoint translates the data.

I have tired multiple header adjustments, and have to think this is related to how SharePoint translates the data. Using an alternate version with SP.RequestExecutor, I get the same issue:

$scope.upload = function () {
        var dataURL = 'data:' + $scope.files.filetype + ';' + 'base64,' + $scope.files.base64;
        var createitem = new SP.RequestExecutor("/sites/asite");
        createitem.executeAsync({
            url: "/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='" + $scope.files.filename + "')",
            method: "POST",
            binaryStringRequestBody: true,
            body: dataURL,
            success: fsucc,
            error: ferr,
            state: "Update"
        });

        function fsucc(data) {
            alert('success');
        }
        function ferr(data) {
            alert('error\n\n' + data.statusText + "\n\n" + data.responseText);
        }
    }
Source Link
Kode
Kode
  • 261
  • 5
  • 19

Image file corrupted upon upload via REST

I have been attempting to use REST to upload image files to SharePoint but am running into the same issue again and again. The issue is that while the image file uploads to an image library, it shows as blank/no file preview/no resolution of it as an image despite having the correct file type listed in its metadata.

I am using AngularJS, in particular, a directive that outputs base64 encoding, but otherwise I am stuck. See my post in the main Stackoverflow, as I thought it was more of an Angular issue but see this as a SharePoint POST challenge now: http://stackoverflow.com/questions/30824211/upload-properly-encoded-base64-image-to-sharepoint-with-angularjs

Here is the directive: https://github.com/adonespitogo/angular-base64-upload

Here is the relevant HTML:

<form>
<input type="file" data-ng-model="files" base-sixty-four-input>
<button data-ng-click="upload()">Submit</button>
</form>

Here is my JavaScript/Angular controller code. Note that this will upload the file, but once it hits the library, its corrupted:

$scope.upload = function () {
        console.log($scope.files); // Log output of directive that shows the filename, filetype, base64, and filesize

            $http.post("/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='" + $scope.files.filename + "',overwrite='true')", $scope.files,
                    {
                        processData: false,
                        headers: {
                            'X-RequestDigest': $("#__REQUESTDIGEST").val(),
                        }

                }).success(function (d) {
                    console.log(d);
                });
            }

I have tired multiple header adjustments, and have to think this is related to how SharePoint translates the data.