Forum

Thread tagged as: Question, Problem, Error

Safari upload issue not working

Hi,

I have a form for uploading images on a Perch Runway site. This does not work on Safari OS and hence wondered if this is a known limitation of Safari browsers. This works as expected on all other browsers including iPhone Safari.

We have tested on the last three versions of Mac OS using the latest version of Safari.

Thanks in advance

Grant Smith

Grant Smith 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

No, that shouldn't be an issue.

Thanks, Drew, that is good to hear. However, we have extensively tested and only get error's on Mac Safari desktop.

Just in case, here is my code:

<perch:before>
    <div class="columns">
        <div class="column">
            <h1 class="title-bar is-size-3 pad-sm">
                <span>Order ID: <perch:shop id="orderID" /></span>
            </h1>
            <perch:if exists="membership_title">
                <h2 class="title-bar is-size-4">Uploading photos for <perch:shop id="membership_title" /> membership</h2>
            </perch:if>
            <p>All feilds are required.</p>
        </div>
    </div>

    <perch:form id="photo_upload" method="post" app="perch_forms" novalidate="novalidate">
</perch:before>


<div class="columns">
    <div class="column">
        <div class="input-margin">
            <perch:label class="label" for="profile_photo">Upload photo*</perch:label>
            <perch:input type="file" id="profile_photo" label="Profile Photo" required="true" />
            <perch:error for="profile_photo" type="required">
                <div class="error">Please upload a photo</div>
            </perch:error>
        </div>
        <div class="input-margin">
            <perch:label class="label" for="first_name">First Name*</perch:label>
            <perch:input class="input" type="text" id="first_name" required="true" label="First name" placeholder="e.g Bob" />
            <perch:error for="first_name" type="required">
                <div class="error">Please add first name*</div>
            </perch:error>
        </div>
        <div class="input-margin">
            <perch:label class="label" for="last_name">Last Name*</perch:label>
            <perch:input class="input" type="text" id="last_name" required="true" label="Last name" placeholder="e.g Smith" />
            <perch:error for="last_name" type="required">
                <div class="error">Please add last name</div>
            </perch:error>
        </div>

        <div class="field input-margin">
            <perch:label class="label" for="postcode">Postal code*</perch:label>
            <p class="control has-icons-left">
                <perch:input class="input" type="text" id="postcode" required="true" label="Postal code" />
                <span class="icon is-small is-left">
                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                </span>
            </p>
            <perch:error for="postcode" type="required">
                <div class="error">Please add postcode</div>
            </perch:error>
        </div>
        <div class="input-margin">
            <perch:label class="label" for="dob">Date of Birth*</perch:label>
            <perch:input class="input" type="date" id="dob" required="true" label="Date of Birth" placeholder="e.g 18/01/1974" />
            <perch:error for="dob" type="required">
                <div class="error">Please add your date of birth</div>
            </perch:error>
        </div>
    </div>

    <div class="column">
        <div class="input-margin">
            <perch:label class="label" for="gender">Gender*</perch:label>
            <perch:input type="select" id="gender" label="Gender" required="true" options="Male,Female" placeholder="Please select"/>
            <perch:error for="gender" type="required">
                <div class="error">Please select your gender</div>
            </perch:error>
        </div>
        <div class="field input-margin">
            <perch:label class="label" for="email">Email*</perch:label>
            <p class="control has-icons-left">
                <perch:input class="input" type="email" id="email" required="true" placeholder="you@email.com" required="true" value="<perch:shop id="member_email" />" />
                <span class="icon is-small is-left">
                    <i class="fa fa-envelope"></i>
                </span>
            </p>
            <perch:error for="email" type="required">
                <div class="error">Please add your email address</div>
            </perch:error>
        </div>
        <div class="field input-margin">
            <perch:label class="label" for="telephone">Telephone*</perch:label>
            <p class="control has-icons-left">
                <perch:input class="input" type="text" id="telephone" required="true" label="Telephone" />
                <span class="icon is-small is-left">
                    <i class="fa fa-phone" aria-hidden="true"></i>
                </span>
            </p>
            <perch:error for="telephone" type="required">
                <div class="error">Please add your phone number</div>
            </perch:error>
        </div>
        <div class="columns">
          <div class="column is-4">
            <img src="/assets/img/portrait-icon.jpg" />
          </div>
          <div class="column">
            <p>Please ensure the photo is square, only features the member of the person who the membership belongs. A passport photo for example would be perfect.</p>
          </div>
        </div>

        <div class="noshow">
            <perch:label class="label" for="address">Address</perch:label>
            <perch:input class="input" type="text" id="address" antispam="honeypot" />
        </div>

    </div>

</div>
<perch:after>
    <div class="button-margin">
        <perch:input id="order_ID" label="Order ID" type="hidden" value="<perch:shop id="orderID" />" />
        <perch:input id="member_name" label="Submitted by" type="hidden" value="<perch:shop id="member_fullname" />" />
        <perch:input id="membership_title" label="Membership Type" type="hidden" value="<perch:shop id="membership_title" />" />
        <perch:input class="button is-danger" type="submit" id="submit" value="Send photo" />
    </div>

    <perch:success>
        <!--* Won't be displayed if success redirect works as expected *-->
        <p>Your file(s) have been received. We will process as soon as we can. You will receive a confirmation email from us shortly.</p>
    </perch:success>

    </perch:form>
</perch:after>
<script>
alert("We are aware of a known issue that doesn’t allow files to be uploaded using the Safari browser on Mac desktops. Please can we advise you use an alternative browser, such as Google Chrome, or a Mobile device.");
</script>

Obvously the script is just there because currently this isn't working.

Drew McLellan

Drew McLellan 2638 points
Perch Support

So what's the error?

The file doesn't upload to the destination folder.

No error's are reported in the debug.

You can view the error on this video: https://www.youtube.com/watch?v=0zQx8R-QGdA&feature=youtu.be

02:30 in

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Hello Grant,

Like I mentioned on Trello, it may be helpful if you try again with debug turned on so you can check the debug message. It's hard to figure out what the issue is from the video.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Is Safari enforcing a validation rule that the other browsers are not?