Clojurians Log v2

Hi @joshmiller thanks for the input. I make many other http requests, post and get, with this API in the app. Only the file upload fails. For local dev the app is running in an expo-dev-client

This also shows a few different things I've tried with some lines commented out...

(defn build-images-form-data []
  (let [data (js/FormData.)
        images @post-images]
    (prn "images in build form data" images)
    (doseq [k (range (count images))]
      (.append data "images" (nth images k) (:uri (nth images k))))
    data))

;; The map passed to :http-xhrio in the re-frame event handler
{:headers {:Cookie (:cookie session)
               :Content-Type "multipart/form-data"}
     :method :post
     :uri uri
     :body images
     ;; :format (ajax/json-request-format)
     ;; :response-format (ajax/raw-response-format)
     :response-format (ajax/json-response-format)
     :timeout 100
     :on-request [:api/request-telemetry]
     :on-failure [:api/error-upload-post-images post]
     :on-success [:posts/images-uploaded post images]}

;; and using the simple POST api:
(POST uri {:headers {:Cookie (:cookie (:user-session db))
                          :Content-Type "multipart/form-data"}
                :body images
                ;; :api (js/XMLHttpRequest.)
                ;; :response-format (ajax/raw-response-format)
                :timeout 100})

The server never registers a request, so it looks like the request is failing within cljs-ajax or one of its deps before attempting to contact the remote server.

I also tried with js/XMLHttpRequest directly:

(defn send-file [{:keys [path token session body]
                  :as params}]
  (let [request (js/XMLHttpRequest.)
        uri (join [(get-api-base) path])]
    (try
      (.open request "POST" uri true)
      (.setRequestHeader request "Cookie" (:cookie session))
      (set! request -onreadystatechange (fn []
                                          (if (and (= (.-readyState request) (.-DONE js/XMLHttpRequest))
                                                   (= (.-status request) 200))
                                            (prn "request is done")
                                            (prn "request not done" request))))
      (.addEventListener request "error" #(prn "xhr error" (.-isTrusted %)))
      (.send request body)
      (catch :default e
        (prn "failed to setup request" request params e)
        (throw e)))
    {}))

@charles946 Is it possible you have network security settings in your iOS or Android build that are preventing you from reaching the server? On iOS at least it will silently fail if you don’t have the remote server whitelisted.

This is also rather interesting: https://stackoverflow.com/questions/60987459/react-native-with-expo-fetch-with-formdata-network-error-on-android-only I just appended the file suffix, like png, to the type prop as described, but that hasn't made a difference. I'm still using fetch like I setup yesterday. May try XMLHttpRequest again with the change to the type value, and if that doesn't do it may need to see if modifying the API is possible to accept an image upload in a different way than with FormData.

And the file I'm testing with is < 1MB

Sending an empty map (object) does work to send a request to the server, but not FormData so far.

ok it looks like I have it working now using XMLHttpRequest directly.

More updates. I got this working in iOS, but Android still fails to even make the request.

What did you change to get it going in iOS?

heh, I had the URL wrong. I needed to append an ID to the path for uploading the file, which I thought I was doing, but I wasn't.

Here is the request that works with iOS:

(POST (:uri params) {:headers {:Accept "application/json"
                                        :Authorization (str "Bearer " access-token)
                                        :Cookie (:cookie (:user-session db))
                                        :Content-Type "multipart/form-data"}
                              :body (:body params)
                              ;; :response-format (ajax/raw-response-format)
                              :success-handler (fn [r] (prn "upload success" r))
                              :error-handler (fn [e] (prn "upload errorrrs" e))
                              :timeout {:timeout params}})

but no clue why it just fails in Android

but I wonder if this might be related since the message I see is "Request failed" https://github.com/JulianBirch/cljs-ajax/issues/276

You could try using js/fetch directly, it’s a decent enough API

yeah, I was thinking my next step is to use that of XMLHttpRequest directly.

Here's what the error handler prints for Android:

Yeah, I think it’s possible that’s the issue. Probably worth trying the JS API and seeing what you get.

agreed

I'll follow-up here with the results

I had to go take care of some other things. Just returned to this. Fetch fails on Android with "Network request failed", but works on iOS. I wonder what it is about Android. Here is the code I used:

(-> (js/fetch (:uri params) (clj->js {:method "POST"
                                               :headers {:Accept "application/json"
                                                         :Authorization (str "Bearer " access-token)
                                                         :Cookie (:cookie (:user-session db))
                                                         :Content-Type "multipart/form-data"}
                                               :body (:body params)}))
             (.then (fn [response]
                      (prn "type" (.-type response))
                      (prn "status" (.-status response))
                      (prn "ok" (.-ok response))
                      (prn "statusText" (.-statusText response))))
             (.catch (fn [error]
                       (let [e (js->clj error :keywordize-keys true)]
                         (prn "network error uploading image: " e
                              (.-sourceURL  error) (.-line error) (.-column error))))))

I read in https://github.com/facebook/react-native/issues/5308 that some folks were having related issues and had to drop the Content-type header for Android, or that the file URI lacked the proper file:/// prefix. I've ruled both of those out just now.

Hm, interesting. So seems like it’s a RN-but-not-CLJS-on-Android issue? Unfortunately I’ve mostly been concentrated on iOS so haven’t had to dig too deeply on Android problems.