Is there a way to upload files without using the FormData object?

I am having to loop through my user object and append it to form data just so I can append an image, is there a way to send a file without using FormData?

const user = ref({
    username: 'a',
    employee_id: props.suggestedId,
    password: 'a',
    password_confirmation: 'a',
    first_name: 'a',
    middle_names: '',
    last_name: '',
    address_line_1: '',
    address_line_2: '',
    address_line_3: '',
    postcode: '',
    company_number: '',
    company_ext: '',
    home_number: '',
    mobile_number: '',
    emergency_name: '',
    emergency_number: '',
    email: '',
    home_email: '',
    joined_at: '',
    role_id: 0,
    country: props.selectedCountry,
})
const submitDisabled = ref(false)
const errorFields = ref([])
const profileImage = ref([])

const save = async () => {
    isLoading.value = true

    const formData = new FormData()

    Object.entries(user.value).forEach(([key, value]) => {
        formData.append(key, value)
    })

    if (profileImage.value?.length) {
        formData.append('profile_image', profileImage.value[0])
    }

    const { errors, getResponse } = useAxios(
        props.routeStore,
        formData,
        'post'
    )
    await getResponse()

jlrdw

1 year ago

Level 75

I do this if just one file:

    buttonForm.addEventListener("click", async (event) => {

       event.preventDefault();
       const thisForm = document.getElementById('personal');
        var formData = new FormData(thisForm);
        var url = '<?php echo DIR . "personal/add"; ?>';
        const response = await
                fetch(url, {
                    method: 'POST',
                    body: formData
                });
        if (response.status === 200) {
            response.text().then(function (text) {
                //handle your response
            });

        } else {
            console.log("error"); // handle as needed
        }
    });

Without appending. Never had to loop.

Edit another with axios js:

    buttonForm.addEventListener("click", async (event) => {
        event.preventDefault();
        const thisForm = document.getElementById('personal');
        var formData = new FormData(thisForm);
        var url = '<?php echo DIR . "personal/add"; ?>';

        axios({
            method: "post",
            url: url,
            data: formData,
            //headers: axios figures it out, not needed
        })
                .then(function (response) {
                    if (response.status === 200) {
                        // handle response
                    }
                    console.log(response);
                })
                .catch(function (response) {
                    //handle error
                    console.log(response);
                });

    });

Works the exact same.

Please or to participate in this conversation.