Forums

OverviewFelgo 2 Support (Qt 5) › Firebase storage issue when trying to view an image from storage bucket.

Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22556

    Eric

    Hello,

    I’m working on getting Firebase Storage to work. If I use your example code for uploading and displaying a photo taken with the CameraPicker, everything uploads fine but I get the following error when the app tries to retrieve the image and display it (everything in <> are actual values I set as <>).

    QML AppImage: Error transferring https://firebasestorage.googleapis.com/v0/b/<app_id&gt;.appspot.com/o/users/<user_id>/test-image1575638873178.png?alt=media&token=<token> – server replied: Bad Request

    I can log into my online Firebase console and see the the image in the correct location.

    Here’s my code:

    AppButton {
        text: "Capture image + upload"
        onClicked: nativeUtils.displayCameraPicker()
    }
    
    AppText {
        id: status
        text: "Idle"
    }
    
    // this will display the image after it's uploaded
    AppImage {
        id: img
        width: parent.width
        fillMode: AppImage.PreserveAspectFit
        autoTransform: true
    }
    Connections {
        target: nativeUtils
        onCameraPickerFinished: {
            if(accepted) {
                var remote_path = "users/" + dataModel.user_id + "/test-image" + Date.now() + ".png"
                fbStorage.uploadFile(path, remote_path, function(progress, finished, success, downloadUrl) {
                    if(!finished) {
                        status.text = "Uploading... " + progress.toFixed(2) + "%"
                    } else if(success) {
                        img.source = downloadUrl
                        status.text = "Upload completed."
                    } else {
                        status.text = "Upload failed."
                    }
                })
            }
        }
    }
    
    FirebaseStorage {
        id: fbStorage
        config: FirebaseConfig {
            id: fbConfig
    
            projectId: "<app_id>"
            databaseUrl: "https://<app_id>.firebaseio.com"
            storageBucket: "<app_id>.appspot.com"
    
            apiKey: Qt.platform.os === "android"
                ? "<android_key>"
                : "<ios_key>"
    
            applicationId: Qt.platform.os === "android"
                ? "<android_id>"
                : "<ios_id>"
        }
    }

    I can’t find anything online about this issue but it seems to be related to user authentication as if I set the Firebase storage rules to be public, the photo displays as it should, but once I change it to require user authentication, I get the error. My Firebase storage bucket rules are:

    service firebase.storage {
      match /b/{bucket}/o {
        match /users/{userId}/{allPaths=**} {
          allow read, write: if request.auth.uid == userId;
        }
      }
    }

    Again, everything writes to the bucket correctly, it just won’t download the image.

    Any help would be appreciated.

    Thank you,
    Eric

    #22564

    David Bacelj

    Hi, I have also the exact same problem.

     

    Upload works fine but once i try to download I get “Bad request”

    I recognized that when i posted the downlaod url (from uploadFile() ) in the browser the image shows up correctly, but once i fetch it with a felgo component the error shows up with a slightly different URL. when i post the different URL shown in the error code in the browser, the error is the same.

    It feels somehow the felgo component change the URL slightly and therefore cannot fetch it.

     

    Any ideas how to fix?

    /David

    #22604

    Alex
    Felgo Team

    Hi David,

    can you send both mentioned URLs so we can compare them, together with a description of the issue, and maybe a minimal runnable example project to support@felgo.com ?
    @Eric, could this also be the issue for you? Please check the URLs like David mentioned and let us know.

    Cheers,
    Alex

    #22647

    David Bacelj

    Hi Alex, Here are the URLs

     

    Note that token is changed.

    This url is returned from upploadFile() and works fine

    https://firebasestorage.googleapis.com/v0/b/%5BEXAMPLE%5D-875a2.appspot.com/o/users%2Fsecret%2FprofilePic.png?alt=media&token=%5BTOKEN%5D

     

    When I set “img.source = downloadUrl” I get “Bad request” and the url in a slightly different string. note %2Fsecret%2F.
    https://firebasestorage.googleapis.com/v0/b/%5BEXAMPLE%5D-875a2.appspot.com/o/users/secret/profilePic.png?alt=media&token=%5BTOKEN%5D

     

     

     

    
      function uploadImage(path) {
          var uploadFileUrl = Qt.resolvedUrl(path) //image in same folder as this QML file
          var remoteFilePath = "users/secret/profilePic.png"
    
          uploadTask = storage.uploadFile(uploadFileUrl, remoteFilePath,
            function (progress, finished, success, downloadUrl) {
              if(!finished) {
                console.log("Upload progress:", progress, "%")
              } else if(success) {
                img.source = downloadUrl
                console.log("Upload finished! Download URL:", downloadUrl)
              } else {
                console.log("Upload failed!")
              }
            }
          )
      }

    I have also sent a example to support as you requested

     

    Mary Christmas

    /David

    #22735

    Eric

    Hello David,

    Did you get a fix for this issue, by chance?

    Thanks,
    Eric

Viewing 5 posts - 1 through 5 (of 5 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support