AngularJS с Ng-File-Upload не может загрузить изображение при использовании Safari на iPhone / iPad - PullRequest
Новая
       35

AngularJS с Ng-File-Upload не может загрузить изображение при использовании Safari на iPhone / iPad

0 голосов
/ 20 июня 2019

Компания, в которой я работаю, имеет веб-сайт AngularJS, который позволяет пользователям загружать изображения в свой профиль.Это работает в Safari на MacBook и Chrome / Firefox / IE на ноутбуке с Windows.Он также работает на мобильных телефонах Android, но не на iPad / iPhone.Что не так и как я могу это исправить?

Вот кнопка html: 

<button type="button" class="mdc-button mdc-dialog__footer__button mr-auto" ngf-select ng-model="uploadedFile" ngf-multiple="false" accept=".jpg,.png,.gif" ngf-pattern="'.jpg,.png,.gif'" ngf-allow-dir="false" ng-disabled="$ctrl.uploading">Upload Picture</button>

Вот соответствующий код AngularJS: 

export class GalleryDialogController {
    static readonly $inject = ['$element', '$scope', '$http', 'Upload', 'GalleryDialogService', '$timeout', 'NotificationService'];
    title: string;
    show: boolean;
    loading: boolean;
    dialog: MDCDialog;
    gallery: Gallery;
    error: boolean;
    selectedImage: GalleryImage;
    canceled: Function;
    accepted: Function;
    uploading = false;

    constructor($element: JQLite, private $scope: IFileUploadScope, private $http: ng.IHttpService, private $upload: ng.angularFileUpload.IUploadService, private GalleryDialogService: GalleryDialogService, private $timeout: ng.ITimeoutService, private notificationService: NotificationService) {
        this.dialog = new MDCDialog($element[0]);

        GalleryDialogService.attach(this);

        $scope.$watch('uploadedFile', () => {
            this.upload($scope.uploadedFile);
        });

    }
upload = (file: UploadedFile) => {
        if (!file) return;

        this.uploading = true;
        this.$upload.upload({ url: '/api/gallery/uploadFile', data: { file: file }, method: 'POST' })
            .then((response: ng.IHttpResponse<string[]>) => {
                if (response.data && response.data.length === 1)
                    this.loadImages(response.data[0]);
                else 
                    this.loadImages();
            })
            .catch((reason: any) => {
                this.notificationService.SendError('Your picture could not be uploaded - please ensure it is less than 4 MB.');
            })
            .finally(() => {
                this.uploading = false;
            });
    }
}

Здесь дляПолнота - это контроллер C #: 

[HttpPost, Route("uploadFile")]
        public async Task<IHttpActionResult> UploadFile()
        {
            var rtn = new List<Guid>();
            var profile = await _profileService.GetProfileByUserAsync(Guid.Parse(User.Identity.GetUserId()));
            var gallery = await _galleryService.GetGalleryAsync(profile.Id);
            var galleryPath = HostingEnvironment.MapPath("~/gallery/");
            HttpRequestMessage request = this.Request;
            if (!request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }

            string root = System.Web.HttpContext.Current.Server.MapPath("~/App_Data/uploads");
            var provider = new MultipartFormDataStreamProvider(root);
            await request.Content.ReadAsMultipartAsync(provider);

            foreach (var file in provider.FileData)
            {
                var newFileId = Guid.NewGuid();
                var filename = file.Headers.ContentDisposition.FileName.Replace("\"", "");
                var extention = System.IO.Path.GetExtension(filename);
                var fileWithOutExtention = System.IO.Path.GetFileNameWithoutExtension(filename);
                var newFilename = newFileId.ToString().ToUpperInvariant() + extention;
                System.IO.File.Move(file.LocalFileName, galleryPath + newFilename);
                //Add the file to the gallery db
                var date = DateTime.Now;
                var img = new GalleryImage
                {
                    Name = fileWithOutExtention.Summarise(50),
                    Created = date,
                    LastUpdated = date,
                    Filename = newFilename,
                    GalleryId = gallery.Id
                };
                await _galleryService.AddImageAsync(img);
                rtn.Add(img.Id);
            }
            return Ok(rtn);
        }

Кнопка загрузки в модальном диалоге корректно открывает диалог ios, какие изображения вы хотите использовать («Возьмите новый» или «Фотогалерея».

Когда выбрана галерея, открывается приложение ios для фотогалереи пользователя.

Затем пользователь выбирает изображение, и фотогалерея закрывается, ничего не загружая, и возвращает пользователя в модальное диалоговое окно сайта.

Нет ошибок в коде Angular или C #.

...