The Ionic 4 Images Guide (Capture, Store & Upload with POST)

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии •

  • @anroswell
    @anroswell 4 года назад +7

    Simmon hellou, i have a question, how i do for take the image for the storage with capacitor and send to backend???...

  • @fariskp5709
    @fariskp5709 5 лет назад +3

    Awesome.... thanks for this tutorial Simon

  • @yoppysantoso4276
    @yoppysantoso4276 2 года назад

    Hello Simon
    that's great tutorial, but i have a problem
    after take from camera and save to local storage, i try to close the app and open again
    then I get with same picture from my library, there is no object when convert to blob inside on readFile function with reader.onload

  • @sivasankarchimata1882
    @sivasankarchimata1882 5 лет назад +6

    thank you for the tutorial , but please make a videos on ionic 4 with capacitor images upload

  • @sameerahmed7333
    @sameerahmed7333 5 лет назад +5

    image upload with camera work but from library not upload images , give error "error while storing file" and also when app is close and then open it again what i see image not shown

    • @codexhivedotcom5369
      @codexhivedotcom5369 5 лет назад

      I am having the same issue. and when i try to upload from camera, its not appending image in formData

    • @beatrizteixeira4220
      @beatrizteixeira4220 5 лет назад

      Did you solve this? I really need the solution

  • @علياءاسامه-ت4م
    @علياءاسامه-ت4م 4 года назад +1

    awesome tutorial

  • @joupomoti3972
    @joupomoti3972 4 года назад

    Hello Sir,this is amazing..thank you so much. Please how to upload all the images taken not one at a time but a function to upload all

  • @ercelpetersotto6734
    @ercelpetersotto6734 5 лет назад +1

    Thanks for this tutorial Simon! Very handy especially with people starting up with Ionic.
    One thing though, have you encountered some issues with the updateStoredImages function during adding a new image? I had some sort of issue with the thumbnail displaying a broken image and threw some errors in debugger console saying "path" was null (resPath I think). I changed the line that concatenates the new value to the images variable from [newEntry, ...this.images] to this.images.concat(newEntry) and it worked fine now. Weird though because both approaches work the same way. Just sharing this in case anyone else had this issue.

    • @galaxies_dev
      @galaxies_dev  5 лет назад +1

      no didn't encounter that but thanks for posting your way here for reference :)

  • @santiagolopera5866
    @santiagolopera5866 3 года назад

    How can I write a ionic function where I can upload an file and then returning its URL in service save a register whit other form data? I need an example code. Excuse my eanglish.. greatings

  • @ElterSouza
    @ElterSouza 5 лет назад

    Awesome, thanks! I was struggling to do a similar approach, but with a few modifications of your tutorial I could achieve what I trying to do.

  • @prashantlazzydevs7060
    @prashantlazzydevs7060 4 года назад +1

    Great tutorial and help a lot.
    But I got stuck at uploading image.
    readFile(file: any) {
    const reader = new FileReader();
    this.presentToast("readFile Data");
    reader.onload = () => {
    this.presentToast("readFile inside onload");
    const formData = new FormData();
    const imgBlob = new Blob([reader.result], {
    type: file.type
    });
    formData.append("file", imgBlob, file.name);
    this.uploadImageData(formData);
    };
    // reader.readAsDataURL(file);
    reader.readAsArrayBuffer(file);
    }
    readfile inside onload toast never comes and it never goes inside reader.onload.
    What should I do?
    Please help.
    Thanks in advance.

    • @galaxies_dev
      @galaxies_dev  4 года назад

      Perhaps the file at the path "file" doesn't exist?

    • @prashantlazzydevs7060
      @prashantlazzydevs7060 4 года назад

      @@galaxies_dev Okay. Let me check for that. But it does show the image in app.

    • @prashantlazzydevs7060
      @prashantlazzydevs7060 4 года назад +1

      I have done it in another method. But, thanks for your help. Now I am converting image to base 64 and sending it to my api.

  • @rezwansaki
    @rezwansaki 5 лет назад +1

    Thanks for this tutorial.
    but how can I access files from sd card and phone memory of the android devices? actually, I want to know about 'android path - publi path and project path' and also 'android_asset'.

  • @arindampal390
    @arindampal390 5 лет назад +4

    Hi Sir,
    I am getting "Error while storing file" This error

    • @beatrizteixeira4220
      @beatrizteixeira4220 5 лет назад

      Did you solve this? I really need the solution

    •  5 лет назад

      @@beatrizteixeira4220 oi, conseguiu resolver? o meu tmb da erro ao tentar injetar ChangeDetectorRef

    • @beatrizteixeira4220
      @beatrizteixeira4220 5 лет назад

      @ não... Eu vi num post que o ionic está com problemas em mostrar imagens da galeria. Só consigo mostrar as imagens quando tiramos fotografia com a câmera. Se calhar não há solução até ao momento 🤷🏻‍♀️ mas se descobrires diz-me por favor!

    • @abdennajifiras1975
      @abdennajifiras1975 4 года назад

      i just start new application maybe it's android ressources probléme

  • @Mohammed_AlAwlaqi
    @Mohammed_AlAwlaqi 6 лет назад

    Simon .. how i can upload files in background tasks and not cancel operation when close app?

  • @AsaltoOfficial
    @AsaltoOfficial 5 лет назад

    Thank you for this awesome tutorial, I'm still facing a problem:
    When using the Ionic DevApp and selecting an image from my iOS gallery I always get the following error message in the terminal:
    [ng] [console.warn]: "Native: tried calling WebView.convertFileSrc, but the WebView plugin is not installed."
    [ng] [console.warn]: "Install the WebView plugin: 'ionic cordova plugin add cordova-plugin-ionic-webview'"
    Everything works fine using the xCode iOS simulator but it't not working in the DevApp.
    I have installed the "cordova-plugin-ionic-webview" of course and also tried replacing the "CDVWKWebViewEngine.m".
    Could you please help here? Thank you so much in advance.

    • @galaxies_dev
      @galaxies_dev  5 лет назад +1

      The Ionic DevApp has a fixed set of plugins, and for real testing I don't recommend to use it. It's a different environment that is nice and fast, but for a real test just build the app to a device and use it from there, that's a lot closer to reality then!

  •  5 лет назад

    I did the same a couple of weeks ago to upload to nodejs back-end, but much more simpler, using simple html type=file. No Cordoba modules or any image path problems. And it was compatible with the browser and Android. But I didn't include camera Cordova, on Android the menu was popping up to select file, camera, etc

  • @wilsondouglas1546
    @wilsondouglas1546 5 лет назад

    nice tutorial Simon one issue when you quit the app and launch it again the app seems not to load the images also when we delete the photos and go to the cache folder the images are still there (Android)

  • @AsaltoOfficial
    @AsaltoOfficial 5 лет назад

    Do you have a solution to automatically delete the image after successfully uploading it to the server? I am able to remove the value of the STORAGE_KEY but I can't figure out how to use this.file.removeFile() after file upload is finished.
    Basically I need the deleteImage() function to be executed right after upload but I can't figure out the right parameters.
    Thank you in advance!

    • @galaxies_dev
      @galaxies_dev  5 лет назад

      What are the errors then? Because the function requires basically the same parameters like before (path to the folder, name of the file) so it can only be an issue of the wrong path!

  • @sasquelle
    @sasquelle 4 года назад

    Hello Simmon,
    Thanks for the tutorial. i have been watching you for a while and your content is really solid.
    is there an updated version of this tutorial for capacitor?

    • @galaxies_dev
      @galaxies_dev  4 года назад +2

      There'll soon be another tutorial for image upload from Ionic with Capacitor, yes!

    • @sasquelle
      @sasquelle 4 года назад

      Simon Grimm Thanks alot. I would be waiting for this tutorial 🙏🏾

    • @deborahjamesmathew
      @deborahjamesmathew 4 года назад +1

      @@galaxies_dev hi Simon Please include selecting and uploading Multiple images . Also would this approach work for multiple image as well. I am using imagePicker to select images . Looking for way to upload all selected image in one go . Thanks a lot for all the content you put !!!

  • @Felipecuevas
    @Felipecuevas 5 лет назад

    Thanks so much, sorry I need some help to convert it to cloudinary storage image I am a little missed and I am not sure how covert to

    • @suheibsherif7747
      @suheibsherif7747 5 лет назад

      Have you managed to do that Felipe? if so, would you mind sharing the steps? thanks

  • @danielchirinosr
    @danielchirinosr 4 года назад

    hello master, to include native sms throws me the following error, I think I should request permissions but nowhere do I get documentation about this, I am using ionic checkpermission and requestpermission but I still can't get the permissions, do you know anything about this?

    • @galaxies_dev
      @galaxies_dev  4 года назад

      You can directly use the SMS plugin to request permission, check the docs here: github.com/cordova-sms/cordova-sms-plugin

  • @danielchirinosr
    @danielchirinosr 6 лет назад

    I took the photos in ionic 3 with FILE_URI and I did not recognize the path of the iamgen on the device and in turn I could not move the files locally on the device. I do not see that you specify here the FILE_URI or DATA_URI but it works for you !! Thank you!

  • @gergelygruda3013
    @gergelygruda3013 5 лет назад

    It seems like my [src]=img.path not correct because i can't see any images just the default icon instead.

  • @cecesyamsulhadi6086
    @cecesyamsulhadi6086 4 года назад

    great tutorial..
    but I want to upload photo with id,name,etc into mysql..
    would tou like to give the tutorial ?

    • @galaxies_dev
      @galaxies_dev  4 года назад

      You can add all this data in your request to your backend and then handle the write operation to the SQL db on the server from there!

  • @ensleydarku4407
    @ensleydarku4407 5 лет назад

    Have you considered doing one with Firestone??

  • @truptihankare3404
    @truptihankare3404 2 года назад

    for multiple images upload only once click can you give tutorial for same example

  • @cpadilla1981
    @cpadilla1981 6 лет назад

    hi, the image is not uploaded ... and i notice that the URL es never called, i will make a debug with my phone and i report if i correct the issue .... by the way, in android it said that the image can not been recognized by the apk in the moment that i must save in to the storage

  • @conexcol
    @conexcol 5 лет назад

    Can this be done in ionic but in a browser instead of an app?

    • @galaxies_dev
      @galaxies_dev  5 лет назад

      Apparently Cordova plugins only work inside an app, but there is already the Web API which allows access to the camera as well (or you could give Capacitor a try)

  • @vertobookavis2289
    @vertobookavis2289 5 лет назад

    thank you simon for this videos, would you mind to do video tutorial on woocommerce api in ionic 4

  • @swanand6300
    @swanand6300 5 лет назад

    Thanks, I am facing one problem.
    In android it always give me error of CORS.
    CAN YOU PLEASE HELP

    • @calebadeleye
      @calebadeleye 5 лет назад +1

      are you using PHP on the server side?

    • @swanand6300
      @swanand6300 5 лет назад

      Nope. We are using Java for the server side

  • @mastershort
    @mastershort 5 лет назад

    I used your code. But i got a problem
    pathForImage(img) {
    if (img === null) {
    return '';
    } else {

    let converted = this.webview.convertFileSrc(img);
    return converted;
    }
    }
    i dont got everything back from converted
    If use this.presentToast(img); before let converted = this.webview.convertFileSrc(img);
    i got the file:///..... back.
    But if i use this.presentToast(converted); after let converted = this.webview.convertFileSrc(img);
    i got nothing
    What can be the problem?

    • @galaxies_dev
      @galaxies_dev  5 лет назад

      Is there no error log? In general the function should convert and return something or at least throw an error!

    • @mastershort
      @mastershort 5 лет назад

      @@galaxies_dev Nein da
      kommt kein Fehler bzw. wüsste ich nicht wo ich den Fehler sehen würde! Es kommt einfach nix züruck. Es sollte doch auch mittlerweile funktionieren wenn ich die Plugins ohne Beta nutze. Wobei ich es auch mit den Beta Version probiert habe.

    • @galaxies_dev
      @galaxies_dev  5 лет назад

      Yes, please use the plugin without beta as v4 is out of beta now!

    • @mastershort
      @mastershort 5 лет назад

      Simon Grimm ok but i tried that already! Same Problem

    • @AdrianSteinsleger
      @AdrianSteinsleger 5 лет назад

      @@mastershort I'm having the same issue here. Would you please share your solution if any found? Thanks a lot.

  • @AdrianSteinsleger
    @AdrianSteinsleger 5 лет назад

    Hi there! Do any of you guys know how to obtan window.WEBVIEW_SERVER_URL from webView, to use it in a specific class? I've been trying several workarounds but I can't make convertFileSrc return nothing but emptiness :(

  • @purbaphalgunimishra9114
    @purbaphalgunimishra9114 5 лет назад

    Thanks a lot for this video. You are the best!!!

  • @kagwad_in
    @kagwad_in 6 лет назад

    Hi sir how to give a print option from mobile to printer?please sir

  • @ing.alejandropiquet3284
    @ing.alejandropiquet3284 5 лет назад +1

    sois lo maximo amigo, gracias

  • @NLMyStIcHeRo
    @NLMyStIcHeRo 4 года назад

    The image is saved in my phones gallery, but not shown in app and not uploaded, no toasts shown either.

  • @vveerrgg
    @vveerrgg 5 лет назад +1

    great vid... perfect length ... perfect format.

  • @sameerahmed7333
    @sameerahmed7333 5 лет назад

    is this work for ionic 4 beta version???

    • @galaxies_dev
      @galaxies_dev  5 лет назад

      v4 is released so you shouldn't have to use the beta anymore!

  • @medienemohamed3359
    @medienemohamed3359 4 года назад

    Help please !
    Error: Cannot find module

  • @ankitjaiswal5068
    @ankitjaiswal5068 4 года назад

    My Readeer.onload Event Is Not Fireing can Any One Help in this

    • @galaxies_dev
      @galaxies_dev  4 года назад

      You can catch the errors with onerror as well, perhaps you can see a reason why it's not firing with an error message then!

    • @prashantlazzydevs7060
      @prashantlazzydevs7060 4 года назад

      I suffer from same problem

  • @qzll333
    @qzll333 5 лет назад

    good explained! But your front camera section it's to big so it takes away space. Thanks for sharing!

    • @galaxies_dev
      @galaxies_dev  5 лет назад

      Yes I messed up the editing for this video, I'm sorry :/

  • @dali2560
    @dali2560 6 лет назад

    Big up !

  • @kapscreators
    @kapscreators 6 лет назад

    Hi can u create a tutorial for ionic 4 map

  • @geoffjollygeoff379
    @geoffjollygeoff379 6 лет назад

    Can you give me the code for asp.net instead of php uploading code

  • @arj1411
    @arj1411 5 лет назад

    Thanks for the nice tutorial. But I am facing some issues with the plugin. For android selection from Gallery is not working. Application crashes after capturing image.
    stackoverflow.com/questions/55522482/ionic-4-native-camera-plugin-issues

  • @brambatimoreira
    @brambatimoreira 4 года назад

    Hello Sinon all right, thanks for your tutorial, it worked for me only on camera, in the gallery presents or error.
    {code: 1, message: "NOT_FOUND_ERR"}

    • @galaxies_dev
      @galaxies_dev  4 года назад +1

      Hmm does your app not have access to the photo library perhaps?

    • @brambatimoreira
      @brambatimoreira 4 года назад

      @@galaxies_dev
      Hello Simon, I allow access, when I capture the camera it works, apnea a gallery that is not allowed.

    • @albertogonzalez1462
      @albertogonzalez1462 4 года назад

      did you fix it?

  • @moh_has99
    @moh_has99 5 лет назад +2

    Invite us to drink coffee !

  • @geoffjollygeoff379
    @geoffjollygeoff379 6 лет назад

    Hello sir good video

    • @sameerahmed7333
      @sameerahmed7333 5 лет назад

      can u please tell me the dir of uploads folder and file how to save it in htdocs???

  • @geoffjollygeoff379
    @geoffjollygeoff379 6 лет назад

    My image is not uploading

    • @cpadilla1981
      @cpadilla1981 6 лет назад

      my neither .... :P and in android is not saved in to the storage ... :(

  • @UjjwalKumar-wg4wu
    @UjjwalKumar-wg4wu 5 лет назад +1

    u could use nodejs btw..

    • @galaxies_dev
      @galaxies_dev  5 лет назад

      Ujjwal Kumar you know, when I do it with nose people ask for PHP and vice versa x)

  • @sameerahmed7333
    @sameerahmed7333 5 лет назад

    pls provide php also...

  • @kingmega8730
    @kingmega8730 3 года назад

    Ionic and php video continues sir

  • @vaibhavlokhande4295
    @vaibhavlokhande4295 3 года назад

    Uncaught (in promise): TypeError: Cannot read property 'is' of undefined
    if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY)

  • @ปพนใจมั่น
    @ปพนใจมั่น 5 лет назад

    ERR_CLEARTEXT_NOT_PERMITTED :(

  •  5 лет назад +1

    `ionic cordova run browser`

  • @pacoperico1109
    @pacoperico1109 4 года назад

    Simon, Hi. Thank you for your excellent tutorials. I have a question. Is that plant behin you a marihuana? LOL

    • @galaxies_dev
      @galaxies_dev  4 года назад

      Lol no but it always looked like it :D

  • @malteschafer5250
    @malteschafer5250 4 года назад

    make timestamps next time dude, i dont want to watch the whole video...

  • @joupomoti3972
    @joupomoti3972 3 года назад

    filePath undefined so upload not working,please Sir any help is much appreciated